Objectives:

• pass data to components rendered by React Router via the render prop
• add nested routes to an application and display sub-nav views
• use the built in history object to programmatically navigate to other routes
• explain the difference between Link and NavLink and when to use which to navigate declaratively between routes

Trinkets (cont.)

Starting Sandbox - https://codesandbox.io/s/trinkets-react-router-ii-starter-wcr2m Solution sandbox - https://codesandbox.io/s/trinkets-react-router-ii-solution-e1g2k

1. Look at the trinkets app. Open both the ItemList and Item components. Note that they are both importing data from a js file. Normally we want to get data from an API, so we won't be able to import it like this. Instead, we will receive data via props from App.
2. Look at our index.js page. Do you see a way in our current setup where we could pass props from our App components to our ItemList and Item component?
3. Right now we don't have a good way to pass props down to components rendered by Route. This is where the render props comes in handy!
4. Render props documentation: https://reactjs.org/docs/render-props.html

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

Set up useState:

We want to add our data from data.js to the useState hook. We are setting it up like this to pass our data down to our other components.

const [product] = useState(data);

1. On the /item-list route, remove the component prop. Add a render prop.

• The render prop takes in an anonymous arrow function
• In the body of the function, we can "render" our component - <ItemList />
• Now we can pass in our items as a prop - <ItemList items={product} />