All right so let's go to our code and let's head over to newsletterGrid.js and in here this.props.history.push('/newsletter/new'); isn't working right. So we need to find out where we are using newsletter-grid, which is in dashboard.js and see if dashboard has access to this component. So Dashboard does because we are using dashboard directly in bootstrap.js inside of a route, which means that we should have access to our history property. So let's go back into dashboard and let's edit our newsletter grid call.

So we're just giving newsletter grid a prop called history and just setting it equal to the same Prop history that dashboard has. There is a slight chance that requireAuth will affect this, but I don't think it will. So let's go ahead and try it out.

Okay, it's still not going to work. Ok yeah so let's go back to the code and basically what we need to do is we need to go into requireauth.js and we need to go to <ComposedComponent/> and basically pass down the props of the <ComposedComponent/> to authentication because technically in our bootstrap the component we're seeing is require auth not dashboard. So really require off contains the history object.

So what we need to do is go into to <ComposedComponent/> and change it to <ComposedComponent {...this.props}/> okay and that contains history and we'll put it in.

Let's go back to our application and let's see if it works. Very sweet. And navigates us to /newsletter/new. Now that it's functional, we need to basically provide the functionality for us to edit a newsletter. We want a route that will allow us to edit it.

Let's go put in the route on our edit button that will allow us to edit a newsletter. Head over to newsletterLatest.js and in our callback let's go ahead and change it.

newsletterLatest.js

    handleEdit = () => {
        this.props.history.push('/newsletter/edit');
    }

And now let's go ahead and see where we're rendering newsletter-latest, and you can see that it's in newsletterGrid.js. So we're not going to have access to props as well within the latest component because newsletter-grid doesn't even have props. We just got props and that's how we're able to push to for the add button. So basically we just need to pass it down into latest.

newsletterGrid.js

        return (
            <div className='newsletter-grid'>
                <Button className='newsletter-grid__button' icon='fas fa-plus' callback={() => this.handleAddNewsletter()}/>
                <NewsletterBox date={new Date()}/>
                <NewsletterArchive/>
                <NewsletterLatest history={this.props.history} {...latest}/>
            </div>
        )

Now there's another way of doing this and it's just by importing history into our file, but I wanted to show you the prop method first.

So let's go ahead and test that out. See if it pushes us to the edit route. OK let's push that, and it pushes us to edit. So now it's functional and it works. Let's go ahead and commit our code and then in the next video we will build out the new newsletter form.

git status
git add .
git commit -m "provided history prop to newsletter children components"

All right see you in the next video where we will hop on to that new newsletter form.

Resources

Code at this stage