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

Question

i'm learning react and i'm trying to do a simple program but i have this error and i can't find where the error is, i've already check and the imdID of each film is different.

to look the json file i'm using see https://www.omdbapi.com/

    import { useState, useEffect } from "react";
import MovieList from "./components/MovieList";

const APIKEY = "";
const URL = "https://www.omdbapi.com/";

async function fetchMovies(search = "The godfather") {
  const response = await fetch(URL + "?s=" + search + APIKEY).then((resp) =>
    resp.json()
  );
  //.then((ris) => ris);

  const { Search: movies, totalResults: totalcount } = response;

  return { movies, totalcount };
}

function App() {
  const [movies, setMovies] = useState([]);
  const [totalCount, setTotalCount] = useState(0);

  useEffect(() => {
    // fetchMovies(); se facessi così fetchMovies è asincrona
    // quindi il codice dentro use effect non si blocca

    const callApi = async () => {
      const data = await fetchMovies();

      setMovies(data.movies);
      setTotalCount(data.totalcount);
    };

    callApi();

    return () => {};
  }, []);

  return (
    <div className="App container-fluid">
      <h1>My favourite movies </h1>
      <MovieList movies={movies} />
      <button type="button" className="btn btn-primary">
        Primary
      </button>
    </div>
  );
}

export default App;



function MovieList({ movies }) {
  return (
    <ul>
      {movies.map((movie) => {
        return <li key={movie.imdID}> {movie.Title}</li>;
      })}
    </ul>
  );
}

export default MovieList;

on the browser the code work, thanks for the help

Does this answer your question? [Warning: Each child in a list should have a unique "key" prop](https://stackoverflow.com/questions/55153873/warning-each-child-in-a-list-should-have-a-unique-key-prop) — lifeisfoo, Mar 18 '22 at 08:07

score 1 · Accepted Answer · answered Mar 15 '22 at 18:16

1

function MovieList({ movies }) {
  return (
    <ul>
      {movies.map((movie) => {
        return <li key={movie.imdID}> {movie.Title}</li>;
      })}
    </ul>
  );
}

You made a typo there. Its movie.imdbID and not movie.imdID. So react is giving you warning because all those id's are getting passed as undefined which isn't unique.

This is how a movie objects looks like produced by your API

{
  "Title": "",
  "Year": "",
  "imdbID": "",
  "Type": "movie",
  "Poster": ""
}

answered Mar 15 '22 at 18:16

Dheeraj Sharma

244
1
6

1

my bad, thanks :) – alessandro cattaneo Mar 15 '22 at 18:48
Also now that you’ve resolved your issue, please remove the api key from the question. Its not wise to share the api key, instead share dummy objects. @alessandrocattaneo – Dheeraj Sharma Mar 15 '22 at 18:53
i removed it, thanks for the advice – alessandro cattaneo Mar 18 '22 at 08:02

score 0 · Answer 2 · answered Apr 10 '22 at 06:10

0

also you can use index of map function to make key is unique:

function MovieList({ movies }) {
  return (
    <ul>
      {movies.map((movie,index) => {
        return <li key={index}> {movie.Title}</li>;
      })}
    </ul>
  );
}

answered Apr 10 '22 at 06:10

foad abdollahi

1,733
14
32

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

2 Answers2

Linked