text: import React, { Component } from 'react';
  import './App.css';
  import Persons from '../components/Persons/Persons';
  import Cockpit from '../components/Cockpit/Cockpit';
  
  class App extends Component {
  	state = {
  		persons: [
  			{ id: 'adreda', name: 'Gary', age: 31 },
  			{ id: 'bcbera', name: 'Rowe', age: 1 },
  			{ id: 'dyfwy5', name: 'Katie', age: 28 },
  		],
  	};
  
  	nameChangedHandler = (event, id) => {
  		const personIndex = this.state.persons.findIndex((p) => {
  			return p.id === id;
  		});
  
  		const person = {
  			...this.state.persons[personIndex],
  		};
  
  		person.name = event.target.value;
  
  		const persons = [...this.state.persons];
  		persons[personIndex] = person;
  
  		this.setState({ persons: persons });
  	};
  
  	deletePersonHanlder = (personIndex) => {
  		const persons = [...this.state.persons];
  
  		persons.splice(personIndex, 1);
  		this.setState({ persons: persons });
  	};
  
  	togglePersonsHandler = () => {
  		const doesShow = this.state.showPersons;
  		this.setState({ showPersons: !doesShow });
  	};
  
  	render() {
  		let persons = null;
  
  		if (this.state.showPersons) {
  			persons = (
  				<Persons
  					persons={this.state.persons}
  					clicked={this.deletePersonHanlder}
  					changed={this.nameChangedHandler}
  				/>
  			);
  		}
  
  		return (
  			<div className="App">
  				<Cockpit
  					title={this.props.appTitle}
  					showPersons={this.state.showPersons}
  					persons={this.state.persons}
  					clicked={this.togglePersonsHandler}
  				/>
  				{persons}
  			</div>
  		);
  	}
  }
  
  export default App;
  