CODEWITHSUNDEEP
reactjs
bier hier
bier hier

Reputation: 22530

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

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?

Upvotes: 0

Views: 2802

Answers (2)

Mμ.
Mμ.

Reputation: 8542

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.

Upvotes: 1

Vikram Saini
Vikram Saini

Reputation: 2771

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>

Upvotes: 0

Related Questions