Easiest way to set a key in React lists
Tags: react, javascript, webdev
Published: 2021-04-19 14:33:22

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

```javascript
"Warning: Each child in a list should have a unique \&quot;key\&quot; 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:

```React
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**](https://reactjs.org/docs/lists-and-keys.html#embedding-map-in-jsx) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) to be sure) just set the key attribute equals to the value:

```React
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:

```React
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 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.*