'Each child in a list should have a unique "key" prop.' When iterating divs

Question

I receive this warning: "Each child in a list should have a unique "key" prop. Check the render method of Todo. in TodoItem (at ToDo.js:14)"

Code:

import React from 'react';
import TodoItem from './todoItem.js'

class Todo extends React.Component {
  state = {
    elements: [
      {title: 'Zrobić zakupy'},
      {title: 'Opłacić domenę'},
    ]
  }

  render() {
    const elements =this.state.elements.map((e, index) => {
      return <TodoItem element={e} i ={index}/>
    })
    return (
      <div className="wrapper">
        <h1>Todo app</h1>
        {elements}
      </div>
    );
  }
}

export default Todo;

import React from 'react';

const TodoItem = props => {
  return <div className="card" key={props.i}>{props.element.title}</div>;
}

export default TodoItem;

I cannot iterate divs in proper way. I find out the key values was implement correctly.
why I am getting warning?

add a key on TodoItem and not inside this component returned element — Shubham Khatri, Jun 23 '20 at 11:33

score 0 · Answer 1 · answered Jun 23 '20 at 11:34

0

You must assign the key property where you use the component TodoItem, instead of where you define the component.

  return <TodoItem element={e} key={index} i={index}/>

answered Jun 23 '20 at 11:34

Håken Lid

22,318
9
52
67

score 0 · Answer 2 · answered Jun 23 '20 at 11:36

0

You need to set the key in the following code

<TodoItem element={e} i ={index} key={index}/>

answered Jun 23 '20 at 11:36

Md Rana Hossain

304
2
7

'Each child in a list should have a unique "key" prop.' When iterating divs

2 Answers2