Deleting component from array of Components

So really what it comes down to, is the person is taking advantage of some cool features that ES6 provides. Let's step through the two important parts:

Part 1 The first important piece here is the map function, which creates an array of Person components from the original persons array

{this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name} 
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler(event, person.id)} />
          })}

The map function has some built in features provided by the JavaScript language. One of those features is providing an index parameter, which tracks the current index you are at in the array while looping through each element. So when you see:

(person, index)

the person is using that built in feature to attach an integer value to each Person component.

This is important, because they are using this integer value, to keep track of that specific persons index in the persons array you are storing in state. The other important piece inside this map function, is this:

click={() => this.deletePersonHandler(index)}

Each Person Component also gets created with an an inline function with its index already hardcoded into the parameter for the deletePersonHandler function. When the deletePersonHandler function is invoked from within a specific Person, the deletePersonHandler already knows exactly what element from the array should be removed, because of the index hardcoded into it.

Part 2 Lets go over what is happening inside of deletePersonHandler:

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

First, they are creating a copy of the persons array, in order not to work on the actual persons array stored in state, which is just good practice. They do that, by taking advantage of the ES6 spread operator, which you can read up on by clicking the link.

Second, using the hardcoded integer index passed as a parameter from the previous map function, they use the splice method, to delete that element from the newly created array.

persons.splice(personIndex, 1)

The first parameter is self explanatory, but the second one, just says, "I want to delete only this 1 element".

After that's done, its simple as setting that newly created array to replace the original persons array in state.

Here is a codepen for you to mess around with. Make sure to uncomment some of the console.logs, so you can see what is happening. Its just some fancy JavaScript at the end of the day, nothing very React specific.

Please read the code comments below. For a step-by-step explanation. This really comes down to understanding a few basic JavaScript constructs:

1. Rest Parameters : the ... says grab an unknown number of elements and store them into an array. (NOTE: the use of const persons is completely acceptable - previous answer is incorrect)

   • It could also be written const persons = this.state.persons

2. Array.prototype.splice(startIndex, deleteCount): Given an index to start deleting and an index to stop deleting, this method removes elements from an array. Since "deleteCount" is 1, it will delete one element from the array. That element is the index of the persons clicked upon.

3. Array.prototype.map : This is an iterator that runs a function against each element of an array. So in the render() method this code: this.state.persons.map((person, index) iterates over each person and creates the Person component for each person stored in the Class' persons array. Note the index for each person is passed into the map() method. So the click handler then passes the individual index for the clicked upon person to the deletePersonHandler() method on the App component. That that is how it knows which person to delete.

You can find a working example of this code for your review and understanding here: https://codesandbox.io/s/3084w8rjk6

deletePersonHandler = personIndex => {
  // This says "Create a local variable and assign to the list of persons registered on this class"
  const persons = [...this.state.persons];
  // This says "Use the Integer passed in to this function as personIndex as the starting point in the array,
  // and splice (remove elements from the array starting there for 1 element" (remove the person from the array);
  persons.splice(personIndex, 1);
  // Components have a setState() method, this overwrites the Class' persons state with the local version
  this.setState({ persons: persons });
  // React renders the new persons state into the view
};