Objectives:

• add nested routes to an application and display sub-nav views
• use the new useHistory hook
• Explore use cases for useRouteMatch hook
• 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-start-e2ts6

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. Before we had to render components with the render prop to pass props to our component. Now we can pass it directly to our component because of how we have set up our routes.
3. 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);

<aside> ❗ Leaving the old way to do this as an example.

</aside>

• 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} />