Challenges

Rendering a List

The key prop

Now we are trying to look at the key prop. See:

function Page() {
    return (
        <ul>
            {
        [
          <li key={1}>Learn JavaScript</li>,
          <li key={2}>Learn React</li>,
          <li key={3}>Learn Next.js</li>,
        ]
      }
        </ul>
    )
}

React has a way of converting this JavaScriptish HTML (JSX) into actual DOM. This Page component may run multiple times, but it should not update the DOM at all these times. Instead, it will only update DOM with the updated content.

But when rendering arrays, React needs a way to identify each element with a unique key. It doesn't have to be a number. But it should be a unique value.

šŸ˜Ž You don't need to think a lot about this. Just add a key prop.

If you don't, React will scream like this:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Page`. See https://fb.me/react-warning-keys for more information.
    in li (created by Page)
    in Page

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: