We can now render a list of posts on the screen of our posts index page which is definitely good progress
but certainly we don't want to always have to use that API client man whenever we want to add a new
post.
Ideally we're going to have that second page that a user can navigate to where they can see a form that
they'll use to add a new post to the back end API.
So in this section we're going to start putting all that code together to add that feature.
Let's do a little bit of discussion on exactly how we're going to approach this.
So first as a reminder we want this new screen to exist out the route posts slash new.
If I go to that route I'm going to expect to see my form appear on the screen.
Now one thing I want to mention about this navigation router right here when we implement this that's
when we're going to see a little bit of an issue come up in re-act router or a little bit of a bug.
And that's the same bug that had mentioned previously that we were going to run into.
So don't worry I haven't forgotten about that.
Yes we're still going to see that little issue pop up.
The one that I really expect you're going to run into on your own personal projects.
Once a user goes to this page they'll see a form appear on the screen where they can add the title categories
contents and then save the post or cancel and go back to the index page.
So let's talk a little bit about exactly how we're going to approach this.
We're going to start off by first scaffolding out our post-New component.
So I want to just have a component that just kind of says hey post-New here it is.
And that's really just going to give us kind of a stub somewhere where we can start adding in some code
to work with the component itself after we put that together we'll add some route configuration around
it.
So specifically a new route inside of our router that will show that post-New component whenever a user
goes to the path of post slash new Third we need to add in the ability for a user to easily navigate
between the index screen and the news screen.
So of course they can always manually entering the exact you are l but that's definitely not reasonable
to expect the user to figure out.
We really want to give them the ability to navigate between the screen that shows the list of posts
and the screen where they can create a new post.
And so we have to figure out how to somehow link between different pages at that point in time.
Fourth we're going to add our form to the post-New component.
So this will be the form that the user is going to enter text into.
And then finally once a user has entered information into that form and click the save button or submit
or whatever we call it we'll want to make sure that we have an action creator to actually save the post
to our back and API.
So steps 1 through 5 Let's get started right now.
First off we're going to scaffold out the post new component.
So inside of my code editor I'm going to find my components directory and I'm going to make a new file
called posts new Jesus.
Then inside of here we'll do our usual boilerplate.
So we'll say import react and components from re-act will define our component so class post-New extends
component.
Put on our render function which is just going to return some GSX right now.
And I think it'll just be a div that says posts new and at the bottom will export this component export
default.
Scuse me.
OK.
So there is a boilerplate so that's step one.
We're now going to move on to Step Two where we're going to add in some route configuration.
So we're always going to do the exact same thing whenever we attempt to add another component to our
application.
We're always going to add in another route all the routes that we add will be placed inside of our top
level index.
JS file so open that up inside of here.
I'm going to import the component that we just created right underneath the post index line.
So I say import pose new from components slash posts new and then down inside of the router configuration
we'll add in additional route so route when ever a user goes to the path slash PPOs new I want to show
the component posts new and close to takeoff.
There we go.
OK.
So that is step number two we added on our route configuration.
So now I really expect that if I go back to the browser and navigate to the route post slash new I would
expect to see that post-New component appear on the screen.
So let's test that out and see how we're doing.
Back inside the browser I'm going to go manually to localhost.
ADHD slash posts slash new.
And then once we get here.
Ha.
Well that's quite interesting.
I do see the post-New component that we just created but I also see some of the markup from our index
route as well.
So this right here is the issue that I said was the very subtle bug that we had introduced with re-act
router.
Essentially what's going on here is we are showing both the Post index screen and the post new component
as well.
Again this is a problem that I almost guarantee you you will run into on your own personal projects.
So let's take a quick break and then we're going to come back and talk about exactly why we are seeing
two components on the screen at the same time.
So I'll see in just a second.