React Unique Key Prop

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

Solution 1:

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

renderData() {
  returnthis.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() {
    returnthis.props.data.tag.map((tag) => {
        return (
            <FlatButtonlabel={tag} />
        )
    })
}

renderCompany() {
    returnthis.props.data.company.map((company) => {
        return (
            <FlatButtonlabel={company} />
        )
    })
}

Should become:

renderTags() {
    returnthis.props.data.tag.map((tag, index) => {
        return (
            <FlatButtonkey={index}label={tag} />
        );
    });
}

renderCompany() {
    returnthis.props.data.company.map((company, index) => {
        return (
            <FlatButtonkey={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() {
    returnthis.props.data.tag.map((tag) => {
        return (
            <FlatButtonkey={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.

Solution 2:

In renderTags() and renderCompany() you have iterators with no keys.