Tutorial by Examples

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, te...

If you don't have unique database ids at hand, you could also use the numeric index of your array like this: render() { const { todos } = this.props; return ( <ul> { todos.map((todo, index) => <li key={ `todo-${index}` }> { todo.text } &...