React unique key prop

Question

I know there are many answers out there for this issue but I couldn't find one that exactly solved my problem. I am getting the following error : Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of QuestionItem. See https://fb.me/react-warning-keys for more information.

I am setting a key for the component but I can't get the warning to go away.

Main component :

renderData() {
        return this.state.data.map((data) => {
            return (
                <QuestionItem key={data._id} data={data} delete={this.deleteItem} edit={this.editItem} />
            )
        })
    }

QuestionItem component :

import React, { Component, PropTypes } from 'react';
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardMedia from 'material-ui/lib/card/card-media';
import CardTitle from 'material-ui/lib/card/card-title';
import FlatButton from 'material-ui/lib/flat-button';
import CardText from 'material-ui/lib/card/card-text';
import Delete from 'material-ui/lib/svg-icons/action/delete';
import ModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit';
import IconButton from 'material-ui/lib/icon-button';
import Button from '../UI/Button';

class QuestionItem extends Component {

    renderTags() {
        return this.props.data.tag.map((tag) => {
            return (
                <FlatButton label={tag} />
            )
        })
    }

    renderCompany() {
        return this.props.data.company.map((company) => {
            return (
                <FlatButton label={company} />
            )
        })
    }

    edit = () => {
        this.props.edit(this.props.data);
    }

    delete = () => {
        this.props.delete(this.props.data._id);
        console.log(this.props.data._id);
    }

    render() {
        return (
            <Card style={{margin: 50}}>
                <CardTitle title={this.props.data.text} />
                <CardText>
                    {this.props.data.answer}
                </CardText>
                <CardActions>
                    { this.renderTags() }
                    { this.renderCompany() }

                    <IconButton onClick={this.delete} style={{float: 'right'}}>
                        <Delete />
                    </IconButton>
                    <IconButton onClick={this.edit} style={{float: 'right'}}>
                        <ModeEdit />
                    </IconButton>
                </CardActions>
            </Card>
        )
    }
}

export default QuestionItem;

What am I missing here?

Answer 1

Well you'll need to log out the data._id and verify that they are all unique. Or you can do this:

renderData() {
  return this.state.data.map((data, index) => {
    return (
      <QuestionItem key={index} data={data} delete={this.deleteItem} edit-{this.editItem} />
    );
 });
}

As the other answer pointed out, the other calls to map that go to a render need to set the key prop too to a unique value.

So these:

renderTags() {
    return this.props.data.tag.map((tag) => {
        return (
            <FlatButton label={tag} />
        )
    })
}

renderCompany() {
    return this.props.data.company.map((company) => {
        return (
            <FlatButton label={company} />
        )
    })
}

Should become:

renderTags() {
    return this.props.data.tag.map((tag, index) => {
        return (
            <FlatButton key={index} label={tag} />
        );
    });
}

renderCompany() {
    return this.props.data.company.map((company, index) => {
        return (
            <FlatButton key={index} label={company} />
        );
    });
}

Note we are using index which is the array index. It is basically like a synthetic identifier in SQL. If what you're actually rendering has unique identifiers already, it is better to use those! For example, the key prop for a tag could be just the tag -- the string itself. The key prop supports multiple types:

react - nodes-and-elements:

key : string | boolean | number | null,

So if your tags are unique (I would expect them to be but obviously don't want to assume), you could do this:

renderTags() {
    return this.props.data.tag.map((tag) => {
        return (
            <FlatButton key={tag} label={tag} />
        );
    });
}

You might consider doing instead something like (tag || '').toLowerCase().replace(' ', '_') however I think React is already doing some manipulation there (besides potentially character case). So just passing the tag itself should be good! You can inspect the DOM to see data-reactid if you're not running a version that got rid of it (I think 0.15 gets rid of it). The React developer tools might let you inspect the key with 0.15.

Update

I do not recommend using the array index as the key. It causes subtle bugs. To see this in action, make an array of objects, render them using the array index and then mutate the array by removing say the 2nd element (and ensure React renders again). Now the indexes don't correspond to the same objects. My recommendation is to always set a key to a unique value. During development, it might be best not to set a key until you find one rather than using the array index because then the errors on the console will remind you to fix this before deploying/committing your change.