In the last lesson, we started outputting the list by mapping an array into an array with JSC elements and this is the common pattern of outputting lists in react. You just use javascript because everything is javascript.
now we still got something to improve for example :

will come back to that soon before i do that let’s see how we actually manipulate the Persons array and for that let me add a new click listener.
Inside our person components there we actually already have a click listener on the first paragraph and there we have execute the click prompt, prior to our change there we then call the switchNameHandler in src/App.js

Lists State In React

Now we will remove that method I am not calling it anymore from anywhere in my application instead I want to add a new handler i’ll name it deletePersonHandler and you might be able to guess what this will do. I want to delete a person from my array of persons and I want to execute this and we will ececute this wheen we click the first paragraph in a person component.

import React from 'react';
import './Person.css';
const person = props => {
	return (
		<div className="Person">
			<p onClick={props.click}> {/* on click will execute the deletePersonHandler method */}
				I am a {props.name} and i am {props.age} year old!
			</p>
			 ...
		</div>
	);
};
export default person;

So again there a click prop is executed as a method. so I should add a click prop to my person componenet in src/App.js referencing to the deletePersonHandler.

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

now when I click the person I want to execute deletePersonHandler method and I want to delete that perticular person. For that I need to know which person is this, since since we output a dynamic list there.
The good thing is the map method also exposes a second argument. I can can receive an second argument the index in the array.

[1,2,3].map((item, index) => { console.log(`${index})  ${item}`) });

So we get that index for free passed in automatically and I want to pass it to the deletePersonHandler

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

I will use the syntex where i executed as the arrow function as you can see above and then I am able to pass index.
so now we can receive this in a deletePersonHandler method.

...
deletePersonHandler = personIndex => {
  const persons = this.state.persons;
  persons.splice(personIndex, 1);
  ...
};
...

the splice() removes one element from the array of the given index. then after I can call this.setState() and set the persons object

...
deletePersonHandler = personIndex => {
  const persons = this.state.persons;
  persons.splice(personIndex, 1);
  this.setState({persons:persons});
};
...

so with this, we set the state of the persons to the new persons the updated persons and this approach has a flaw I will fix soon.
lets try out though save the file and run the application till now we will be still getting the same warning as we were getting before.
click on the paragraph make sure our implemented functionality working well. However, I said that the approach has a flaw and I will dive deeper into that flaw in the next lesson.

React introduction
React Component