React，列表中的每个孩子都应该有一个唯一的 key prop

Question

So I'm trying to make a to do list and it's not working when I try to add 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

Solution to the problem

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

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

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

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

Related to the comment below

It's disappearing because the page gets refreshed when you submit the form. You need to prevent that behaviour by changing addItemToList like so:

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

Answer 2

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} />)}

Answer 3

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, eg 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} />)
}