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 = "&apikey=eead1bf8";
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

CodePudding user response：

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": ""
}