Easiest way to set a key in React lists

If you are a React developer or you are a newbie in React, I'm sure you've got this warning message sometime:

"Warning: Each child in a list should have a unique \"key\" prop. See https://reactjs.org/link/warning-keys for more information."

This happens when you are using the map method to return a list of components from collection of items or values. You probably end coding something like the following:

function Day({ name }) {
    return <div>{ name }</div>;
}

function Week() {
    const collection = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    // notice the map method in the following line
    return collection.map(day => <Day name={day} />);
}

As you can see in the code, we are returning one component per each day of the week that renders its name. There is no issue with this code excepting that React will throw a warning message saying to provide a key atribbute to each child. The reason behind this is to let React identify items that have been changed, added or removed.

There is an article in React Docs pages with all the information you need about lists and keys.

To remove this warning message, if you have an id field for each of the items of the collection just use it and set it on the key attribute. If you don't have it like the example above, how can you provide this id?

Use the same value as key

Well, as the docs says, key attribute must be a string value and be different between siblings. If you have a collection with unique values (use the Set object to be sure) just set the key attribute equals to the value:

function Day({ name }) {
    return <div>{ name }</div>;
}

function Week() {
    const collection = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    // check the key attribute has been added with day as its value
    return collection.map(day => <Day key={day} name={day} />);
}

Use the index parameter of map method

If you are not sure about the uniqueness of your values, the map method has a second parameter that gives you the current position of the item in the collection, and you can use it as the key as well:

function Day({ name }) {
    return <div>{ name }</div>;
}

function Week() {
    const collection = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    // check key is the current position of the item in the collection
    return collection.map((day, index) => <Day key={index} name={day} />);
}

Here you have the link to the map method docs.

Wrapping up

These are two simple ways to remove the warning message from your application without doing any kind of effort on your model (the collection of items). I think these are pretty quick and easy to implement and avoid to create dirty code that are out of the features of your app.

Hope this article makes your life a bit easier as a React developer.
Comments are well received.