React Keys in react Using the id of an element
Example
Here we are having a list of todo items that is passed to the props of our component.
Each todo item has a text and id property. Imagine that the id property comes from a backend datastore and is a unique numeric value:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
We set the key attribute of each iterated list element to todo-${todo.id} so that react can identify it internally:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
