Adding an element to the todo list not working, and getting "Each child in a list should have a unique key prop" in React

Question

So I'm trying to make a to-do list, and it's not working when I try to add an item to the list with addItemToList. I am getting this error:

Each child in a list should have a unique “key” prop

App code:

function App() {
  const [currentItem, setCurrentItem] = useState("");
  const [itemlist, updateItemList] = useState([]);

  const onChangeHandler = (e) => {
    setCurrentItem(e.target.value);
  };

  const addItemToList = () => {
    updateItemList([...itemlist, { item: currentItem, key: Date.now() }]);
    setCurrentItem("");
  };

  return (
    <div className="App">
      <header>
        <form id="to-do-form">
          <input
            type="text"
            placeholder="Enter Text"
            value={currentItem}
            onChange={onChangeHandler}
          />
          <button onClick={addItemToList} type="submit">
            Add
          </button>
        </form>
        <List itemlist={itemlist} />{" "}
      </header>
    </div>
  );
}

List code:

function List(props) {
  return (
    <div>
      {props.itemlist.map((itemObj) => {
        return <p>{itemObj.item}</p>;
      })}
    </div>
  );
}

Answer 1

Since each item object in your case already has a key prop equal to Date.now(), you could use it, this way:

function List(props) {
  return (
    <div>
      {props.itemlist.map((itemObj) => {
        return <p key={itemObj.key}>{itemObj.item}</p>;
      })}
    </div>
  );
}

But if you haven't a key prop on your items, you could use the index from map, like so:

function List(props) {
  return (
    <div>
      {props.itemlist.map((itemObj, index) => {
        return <p key={index}>{itemObj.item}</p>;
      })}
    </div>
  );
}

Also, you need to prevent the browser from refreshing the page after submitting the form in addItemToList with e.preventDefault() to see the added item:

 const addItemToList = (e) => {
    e.preventDefault();
    updateItemList([...itemlist, { item: currentItem, key: Date.now() }]);
    setCurrentItem("");
  };

Answer 2

This question is a recurring one that has been answered multiple times. Please make sure to use the search in advance before posting questions to make sure your question is no duplicate.

But here you go:

As the error

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

states, React requires children in an array to have a stable identity allowing React to identify which elements have been changed, added or removed during the component lifecycle. The identity is assigned to components with the key prop. The docs are very clear about this. In fact, it is recommended to use a string that is unique among all list siblings.

Assuming that the items have unique names, e. g. item1 and item2, you could do something along those lines to use them as component keys when rendering:

function App(){
  const [currentItem, setCurrentItem] = useState("")
  const [itemlist, updateItemList] = useState([])
  
  const onChangeHandler = e => {
    setCurrentItem(e.target.value)
  };

  const addItemToList = () =>{
    updateItemList([...itemlist, {item: currentItem,  key: Date.now()}])
    setCurrentItem("");
  };

  return itemlist.map((item) => <p key={item.name} />)
}

Answer 3

You probably have an itemlist.map which transforms this array in jsx element to render.

This element needs an unique key, its a prop that helps react render your list correctly.

So, you can pass this prop after map this list {itemlist.map(item => <element key={item.UNIQUE_KEY} />)}

If you dont have an unique key, you can pass the index of your map, but its not recommended because if you modify this list, react will recalculate all those index again

{itemlist.map((item, index) => <element key={index} />)}