Warning: Each child in a list should have a unique "key" prop making a to-do list react

Question

im making a to-do list using react but I'am not able to understand the error can please some one tell me what I'am doing wrong.

   constructor(props) {
   super(props);
    this.state = {
    userInput: '',
    list:[]
   }
   }
   changeUserInput = (Input) => {
   this.setState({userInput: Input});
   } 

   onButtonSubmit = (Input) => {

   let listArray = this.state.list;
   listArray.push(Input);
   this.setState({list: listArray})
   }


    render() {
    return (

   <div className="App">


    <Input 
      changeUserInput = {this.changeUserInput}
     onButtonSubmit = {this.onButtonSubmit} 
      /> 

   <ul>
   {this.state.list.map((val) => <li>{val}</li>)}
   </ul>
   </div>

 input.js

   import React from 'react';

   const Input = ({changeUserInput, onButtonSubmit}) => {
   return(
   <div>
    <p className = 'f2'>
      {'Make a shopping list by adding items'}
    </p>  
   <div>
    <input  className = 'w-70 ma2 pa2 br-pill' type = "text" 
   placeholder = "enter items" onChange={changeUserInput} />
   <div>
    <button className= 'f6 grow  br-pill ba bw1 ph3 pv2 mb2 dib black 
   pointer' onClick ={onButtonSubmit} >Add Item</button>
   </div>   
   </div>
   </div>
   );
  }
  export default Input;

Warning: Each child in a list should have a unique "key" prop. Warning: This synthetic event is reused for performance reasons Uncaught Invariant Violation: Objects are not valid as a React child

Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — jonrsharpe, Aug 01 '19 at 11:24

score 1 · Answer 1 · answered Aug 01 '19 at 11:26

1

in React.js you need to provide key attribute when you are using list of components so DOM element can understand they are different then each other. It may seem to work without using but there can be some bugs that unexpected. So use

{this.state.list.map((val) => <li key={val.id}>{val}</li>)}

answered Aug 01 '19 at 11:26

octobus

1,246
1
14
20

thanx a lot for your answer the key problem has been solved but two more error are also there (1)- Warning: This synthetic event is reused for performance reasons, (2) -Uncaught Invariant Violation: Objects are not valid as a React child. I am a beginner please help me – Sumit Joshi Aug 01 '19 at 11:40
Hmm, can you change your `onButtonSubmit` function in `ìnput.js` to this `` – octobus Aug 01 '19 at 11:46

score 1 · Answer 2 · answered Aug 01 '19 at 11:29

1

Like @octobus said foreach looped item you need unique key identified, if your val hasn't the property id you can use the loop index:

{this.state.list.map((val, index) => <li key={index}>{val}</li>)}

answered Aug 01 '19 at 11:29

red

1,529
1
12
33

thanx a lot for your answer the key problem has been solved but two more error are also there (1)- Warning: This synthetic event is reused for performance reasons, (2) -Uncaught Invariant Violation: Objects are not valid as a React child . – Sumit Joshi Aug 01 '19 at 11:36
1

Although `index` can be used in this example and you are right. It is unadvised to use because in some cases in can create some bugs such as when adding and removing an item in list https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318 – octobus Aug 01 '19 at 11:37

Warning: Each child in a list should have a unique "key" prop making a to-do list react

2 Answers2