flexible changing name event

import React, { Component } from 'react';
import './App.css';
import './Person/Person.css';
import Person from './Person/Person';

// We'll be creating components using this approach rarely, more often we'll be using functions that return JSX
class App extends Component {

  // we can use state only in components
  state = {
    persons: [
      { id: 'abc', name: 'Max', age: 28},
      { id: 'def', name: 'Manu', age: 29},
      { id: 'ghi', name: 'Stephanie', age: 26},
    ],
    otherState: 'some other value',
    showPersons: false
  }

  nameChangedHandler = (event, id) => {

      // finding if id exists (not necessary, since we pass id in arguments)

      const personIndex = this.state.persons.findIndex(p => {
        return p.id === id;
      });

      // copying person with found ID so we don't operate on original object

      const person = {
        ...this.state.persons[personIndex]
      }

      // changing name of copied person

      person.name = event.target.value;

      // copying all persons from state

      const persons = [...this.state.persons];

      // assigning person with changed name to the old one

      persons[personIndex] = person;

      // ALTERNATIVE APPROACH:
      // const person = Object.assign({}, this.state.persons[personIndex])

      this.setState( { //setState() is a method from Component import
        persons : persons
    } )
  }

  deletePersonHandler = (personIndex) => {

    // changing this persons const work, because it's an array of references
    // assigning only this.state.person isn't good practice, slice() assigns copy of it
    // const persons = this.state.persons.slice();

    // ES6 equivalent of slice() is spread operator(...)
    const persons = [...this.state.persons];

    // deletes 1 element, starting from index = personIndex
    persons.splice(personIndex, 1);
    this.setState({persons: persons});
  }

  togglePersonsHandler = () => {

    const doesShow = this.state.showPersons;
    this.setState({
      showPersons : !doesShow
    })
  }

  render() {

    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    }

    let persons = null;

    if(this.state.showPersons){
      persons = (
        <div>
          {/* Converting JS array to JSX, index is optional, map can have one argument */}
          {this.state.persons.map( (person, index) => {
            return <Person
              name={person.name}
              age={person.age}
              key={person.id}
              click={() => this.deletePersonHandler(index)}
              changed={(event) => this.nameChangedHandler(event, person.id)}/>

          })}
        </div>
      );
    }

    return (
      // all the code should be wrapped into one root element per component
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        {/* lowercase - native HTML elements, uppercase - our elements, e.g. <div> and <Div>*/}
        {/* JS - onclick, JSX - onClick */}
        {/* () => this.switchNameHandler(name) OR this.switchNameHandler.bind(this, name) */}
        {/* <button onClick={() => this.switchNameHandler('test')}>Switch name</button> */}
        <button
          style = {style}
          onClick={this.togglePersonsHandler}>Toggle persons</button>
          {persons}
      </div>
    );
    //return React.createElement('div', {class: 'App'}, React.createElement('h1', null, 'Hi, I\'m a React App!!!'));

    // both versions of code create certain elements
    // in fact JSX implicitly uses React.createElement method, so we always need to remember to import React component


  }
}

export default App;