Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React component Warning: Each child in a list should have a unique "key" prop

I want to know why it gives me the error in the title. This is my code:

const MovieItem = (movieData) => {


return(
    <div>
      {Object.entries(movieData).map((values)=>{
        return <li key={values.id}>{values.title}</li> 
      })} 
    </div> 
  )
}

export default MovieItem

This is inside of a folder named MovieItem like the component and inside of App are this:

    function App() {
  const [movies, setMovies] = useState([
    {
      "id": "a4e4a6c7-36d3-4a3a-b2e9-3c5e6b368730",
      "title": "Inception",
      "description": "A thief who enters the dreams of others to steal their deepest secrets.",
      "year": 2010
    },
    {
      "id": "95ccff67-9097-4a9e-9e79-0253b4f59ddc",
      "title": "The Shawshank Redemption",
      "description": "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
      "year": 1994
    },
    {
      "id": "f21a43a7-64a1-40f7-a4ed-c04b28a9bf4b",
      "title": "The Godfather",
      "description": "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
      "year": 1972
    },
    {
      "id": "4b9467a0-2244-4ae1-9d44-5201b4e8e56a",
      "title": "Goodfellas",
      "description": "The story of Henry Hill and his life in the mob, covering his relationship with his wife Karen Hill and his mob partners Jimmy Conway and Tommy DeVito.",
      "year": 1990
    }
  ])
    
  return(
    <div>
      <ol>
        {movies.map((movies) =>{
          return <MovieItem id={movies.id} title={movies.title} description={movies.description} year={movies.year} set={movies.set}/>
        })}
      </ol>
    </div>
  )
}

export default App

What is the problem?

Tags:

2

Answers


  1. 0 
        const MovieItem = (movieData) => {
return(
    <div>
      {Object.entries(movieData).map((values, index)=>{
        return <li key={index}>{values.title}</li> 
      })} 
    </div> 
  )
}

export default MovieItem

    This will resolve your Problem.
    Always use the unique key as a key for the map. Otherwise, DOM Does not recognize or identify the component. That’s why this error come

    Login or Signup to reply.
  2. 0

    All children of map must have a key like :

        function App() {
  const [movies, setMovies] = useState([]);
  return(
    <div>
      <ol>
        {movies.map((movies,index) =>{
          return <MovieItem key={index} id={movies.id} title={movies.title} description={movies.description} year={movies.year} set={movies.set}/>
        })}
      </ol>
    </div>
  )
}

export default App
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search