How to fix reactjs warning: each child in an array should have a unique prop...?

Question

I am running my reactjs app and getting a warning in my console:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of AppointmentsContainer

My component looks like this:

export default class AppointmentsContainer extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        //todo remove
        //debugger;

        let appointments = mockData.data;

        return (
            <div>
                //loop through the appointments
                {appointments.map(function(a,i){
                    //todo remove
                    //console.log('testing=a', a);
                    return <p><Appointment key={i}/></p>
                })}
            </div>
        );
    }
}

I am passing in a key now but still the warning comes up? How can I fix this?

Answer 1

You need to put the key in the p element instead of Appointment. Since Appointment is the only child of p, it does not need a key.

Answer 2

Adding a key will not perform any extra functionality but still to remove the warning you can replace your code with

  return <p  key={i}><Appointment/></p>

Or you can keep change your code to

 <div>

                //loop through the appointments
                {appointments.map(function(a,i){
                    //todo remove
                    //console.log('testing=a', a);
                    return <Appointment key={i}/>
                })}

            </div>

And in Appointment component you can access it as

<div>
<p>{this.props}</p>
</div>