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

Question

I was doing a project and asked him to use a "key", I put it and always gave the error of Warning: Each child in a list should have a unique "key" prop, then I looked at the stack overflow to see more and realized that the key should be unique, I gave a console.log, but the result was different numbers and an error

Code:

    <div className="page">
      <section className="lists">
        {movieList.map((item, key) => (
          <div>
            {item.name}
            <MovieRow key={key}/>
            
          </div>
        ))}
      </section>
    </div>
  )

follow console.log(key)

Answer 1

I suggest you read the topic of react documentation for more details but I will leave the excerpt pertinent to your problem.

key is a special string attribute that you need to define when creating element lists.

The attribute key shall be unique and applied to the parent component of each iteration.

<div className="page">
  <section className="lists">
    {movieList.map((item, key) => (
      <div key={key.toString()}>
        {item.name}
        <MovieRow />
      </div>
    ))}
  </section>
</div>