• Practice writing dynamic components
• Practice jumping into existing code and making the necessary changes

Previously, we had been importing some data directly into each component that needed it using import. When we're working with React, it's we'll often access data by passing it down as a prop rather than importing it. This will be particularly true once we start working with data from external sources, such as APIs.

In this lab, you'll write React components and render them dynamically based on props they receive from their parent components. This will enable us to use components as templates with the ability to render variable content.

We'll continue building the portfolio site we started in the previous labs, and make the content dynamic by using props.

Here is an image of what we want once we are finished:

...and here is a tree view of our component parent-child structure:

└── App
    ├── NavBar
    ├── Home
    └── About
        └── Links

It's recommended that you run npm start and work on this in the browser before running tests. Try to get your app to match the demo! Once you've built out the components below, run npm test or learn test to see if your code passes the tests.

• React Documentation: Components
• Conditional Rendering