We already put some work into lists and we improved them by for example taking advantage of the index of the element to run some code which takes into account on which element it runs.
we can still improve this for example by taking care of the previous error we were getting i.e key prop is missing.

Lists keys

The key prop is an important property we should add when rendering list of data and that is why react tell us to do so.
Till now we haven’t specified a key property in person. It’s a default property React expects to find on an element no matter if it is a custom component or a default HTML element which you render through a list.
So basically by mapping an array into JSX elements. The Key property helps React update the list efficiently.

Consider a case we have in the last lesson that we delete elements from the list. Of course, it works but behind the scene, react needs to find out what it needs to adjust in the overall DOM and will dive deeper into what react does in a specific section here in the course, where I will give you a brief look behind the scenes.
So basically what it does is, it has something called a virtual DOM where it compares what it would render now if it were to call the render method now or if it did actually adjust the real DOM with the result of the render method to the previous DOM that rendered it does this compression of the future with the past basically.
And for the list it, of course, needs to find out which elements change and react isn’t the human, it doesn’t see as we do that we have three distinct elements with different names being rendered.
So by default, it will rerender the whole list and for the long list, this is very inefficient.
That is why we should assign a Key property to allow react to keep track of the individual elements so that it has a clear property it can compare between the different elements to find out which elements changed and which didn’t.

Lets assign a key now:

...
if (this.state.showPersons) {
	persons = (
		<div>
			{this.state.persons.map((person, index) => {
				return (
					<Person
						click={() => this.deletePersonHandler(index)}
						name={person.name}
						age={person.age}
						key={index}
					/>
				);
			})}
		</div>
	);
}
...

so what we do is we asign a key and what we assign inside key is something unique. typically you probabily have some id on your elements if you get them from a database or something like that. Chances are high you do have an ID or any other unique identifier.
so what we could do is we could use index because after all index changes where every element in the array right!.
thats right but index also ia a part of the list itself if the list changes every element will receive a new index atleast every element after to change.
so index is also not a good key in the end it will not really help react so we should really try to have a unique identifier.
so inside our persons dummy data there could be and value named as id …

...
state = {
	persons: [{ id: 's65fsdf6', name: 'Lucy', age: 23 }, { id: 'ecvs1f3223', name: 'Max', age: 12 }, { id: 'dsf76sd87f6', name: 'Mike', age: 34 }],
	showPersons: false,
};
...

now with that We can use that in render() method.

...
if (this.state.showPersons) {
	persons = (
		<div>
			{this.state.persons.map((person, index) => {
				return (
					<Person
						click={() => this.deletePersonHandler(index)}
						name={person.name}
						age={person.age}
						key={person.id}
					/>
				);
			})}
		</div>
	);
}
...

Make sure every element have the unique key that react can use to compare the elements of the future with the elements of the past and oly update the DOM places where it needs to be update.
Now when we run application and toggle button then you will see the key warning message is gone.
You can see the behavior is the same, but behind the scene, it is now able to do that in a more efficient way which of course is super important.

React introduction
React Component