Can anyone explain why I'm getting the error about "same key"-CodePudding

I am doing my React App, I don't know where I did a mistake.

The error is:

"Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. at ul at Movies (http://localhost:3000/static/js/main.chunk.js:1439:5) at Route (http://localhost:3000/static/js/vendors~main.chunk.js:3780:29) at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:3982:29) at div at div at div at Router (http://localhost:3000/static/js/vendors~main.chunk.js:3411:30) at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:3032:35) at App"

My code:

import React, {Component, Fragment} from "react";
import {Link} from 'react-router-dom';

export default class Movies extends Component {

    state = {
        movies: [],
        isLoaded: false,
        error: null,
    };

    componentDidMount() {
        fetch("http://localhost:4000/v1/movies")
          .then((response) => {
            console.log("Status code is", response.status);
            if (response.status !== "200") {
              let err = Error;
              err.message = "Invalid response code: "   response.status;
              this.setState({error: err});
            }
            return response.json();
          })
          .then((json) => {
            this.setState({
              movies: json.movies,
              isLoaded: true,
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
            );
        });
    }
    
    render() {
        const {movies, isLoaded, error} = this.state;
        
        if (error) {
            return <div>Error: {error.message}</div>
        } else if (!isLoaded) {
            return <p>Loading...</p>;
        } else {
         return (
            <Fragment>
                <h2>Choose a movie</h2>

                <ul>
                    {movies.map((m) => (
                        <li key={m.id}>
                           <Link to={`/movies/${m.id}`}>{m.title}</Link>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
        }
    }
}

CodePudding user response：

You may have non-unique movie ids.

React uses component keys to determine which of the components in a collection needs to be re-rendered instead of just re-rendering the entire set of components every time anything changes.

You can read more about keys and their uses at https://www.digitalocean.com/community/tutorials/react-react-keys-and-you

Can use indices as key:

{movies.map((m,i) => (
    <li key={i}>
       <Link to={`/movies/${m.id}`}>{m.title}</Link>
    </li>
 ))}

Here is an example of a similar warning when using duplicate keys and using indices as unique keys. https://codesandbox.io/s/quiet-snowflake-26v1o?file=/src/App.js