REACT-JS - Warning: Each Child in a list should have a Unique "key" prop

Question

Problem in rendering my state always gives error:

Warning: Each Child in a list should have a Unique "key" prop.

Check the render method of Main. See https://fb.me/react-warning-keys for more information.

in li (at main/index.js:42)
in Main (at App.js:14)
in header (at App.js:12)
in div (at App.js:10)
in App (at src/index.js:7)

code:

**

render(){     
    return( 
        <ol className="planetas-list">
            {this.state.Planetz.map(planetas =>(                
                <li key={planetas.lista}> 
                    {planetas.PlanetzClima} 
                </li>                   
         ))}
        </ol>  
    )
  }
}

**

Could you tell me what’s going on? I’ve looked hard at overflow but still couldn’t solve... vlw!

Answer 1

It is a common problem. All items in a rendered list must contain a property called key and it should be unique( ie, can not have another key equal).

I saw that in your code you put <li key={planetas.lista}>, but it’s probably not unique.

Try to put the ID of each item there.

In the latter case you can use the index:

render(){     
  return( 
      <ol className="planetas-list">
          {this.state.Planetz.map((planetas, index) =>(                
              <li key={index}> 
                  {planetas.PlanetzClima} 
              </li>                   
       ))}
      </ol>  
  )
}
}

But not recommended by Facebook:

We don’t recommend using Indexes for Keys if the order of items may change. This can negatively Impact performance and may cause issues with Component state. Check out Robin Pokorny’s article for an in-Depth Explanation on the Negative Impacts of using an index as a key. If you Choose not to assign an Explicit key to list items then React will default to using Indexes as Keys.

You can take a look at the documentation for more details: https://pt-br.reactjs.org/docs/lists-and-keys.html

Good luck!