In the previous post we rendered list without a component.
Let’s try to change the same example and make a component that accepts an array and returns a list.
Just like this:
But that code has this warning: Each child in a list should have a unique “key” prop.
What’s a key?
In React, you need to include a string attribute when you create a list of elements. That string attribute is called a “key”.
Let’s update the code and assign a key to the list items. We need to do that inside numbers.map() function.
All we need to do is just add the code below in the li tag.
Example: Rendering list elements with a Key
Here’s the final code without the warning:
Here is a detailed post for you:
What are keys in React?
How to embed map function in JSX?
As you can see in the example above, we have a separate listItems that is included in JSX. We can skip that step and embed the expression using JSX curly braces like this:
components examples list render