# Lesson5-2: React Router: Dynamically Render Pages
###### tags: `Recat`

As the app currently functions, there's no way to add new contacts! That's a shame because I really need to add Richard to my list of contacts. So let's create a form that'll let us create new contacts and save them to the server.

We don't want the form to display all of the time, so we'll start out by having the form show up only if a setting is enabled. We'll store this setting in `this.state`. Doing it this way will give us an idea of how React Router functions.

{%youtube I4wTc_ulrME%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/e4a527dbd7a5e1d3fca2a92251556024d834258a)

We packed quite a bit of important changes in this little video! We created the CreateContact component that'll be in charge of the form to create new contacts. In staying with the general React theme of favoring composition, we created this as a standalone component and used composition by adding it to the `render()` method in the App component.

In an attempt to do an extremely simple recreation of how React Router works, we added a screen property to `this.state`, and used this property to control what content should display on the screen. If `this.state.screen` is `list` then we'll show the list of all existing contacts. If `this.state.screen` is create then we'll show the CreateContact component.

# Short-circuit Evaluation Syntax
In this video and when we created the Now showing section from earlier, we used a somewhat odd looking syntax:

{this.state.screen === 'list' && (
  <ListContacts
  contacts={this.state.contacts}
  onDeleteContact={this.removeContact}
  />
)};

and

{this.state.screen === 'create' && (
  <CreateContact />
)}

This can be a little confusing with both the JSX code for a component and the code to run an expression. But this is really just the logical expression `&&`:

expression && expression

What we're using here is a JavaScript technique called short-circuit evaluation. If the first expression evaluates to true, then the second expression is run. However, if the first expression evaluates to false, then the second expression is skipped. We're using this as a guard to first verify the value of `this.state.screen` before displaying the correct component.

For a deeper dive into this, check out the [short-circuit evaluation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation) info on MDN.

# Add A Button
Right now we have to manually change the state to get the app to display the different screens. We want the user to be able to control that in the app itself, so let's add a button!

{%youtube AX-ZpaliAYc%}

[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/93ff543181f0558ee5be9aab8eef771c47269451)

# Dynamic Routing Recap
In the code we added in this section, we tried our attempt at using state to control what content displays to the user. We saw things break down, though, when we used the back button.

Now, let's switch over to using React Router to manage our app's screens.

> 你會發現當你回去上一頁的時候會回不去到空的地方，這時候就會需要React-Router