In the last lesson, we execuated the switchNameHandler upon a click, Now we want to Manipulating the State up on the click.

Manipulating the State

Now Will comment out the alert method which we implemented and we could simply use this.state.persons

...
class App extends Component {
	state = {
		persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
	};

	switchNameHandler = () => {
		 // alert('called');
		 this.state.persons[0].name = 'Lucy stifert' // its  a wrong way : Dont do this
	};
	render() {
		return (
		 ...
		);
	}
}
export default App;

on click event we will change te name of the firts element from the array i.e. this.state.persons[0].nameafter that save the code then see what happes if we execuate the code…
On click it changes nothing we will see the name lucy as it is. instade of that we have to use the React method this.setState extend by a Component class and that is made available by the react library.
The Component object happens to have a steState() method. this is a method which allows us to update the state property and it will then ensure that react gets to know about the update and then updates the DOM.
setState({}) takes an object as an argument and it will merge whatever we find there with our existing state.

	import React, { Component } from 'react';
	import './App.css';
	import Person from './Person/Person';
	class App extends Component {
		state = {
			persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
			someOtherState: 'dummy Data'
		};

		switchNameHandler = () => {
			this.setState({
				persons: [{ name: 'Lucy Stifert', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
			});
		};
		render() {
			return (
				<div className="App">
					<h1> Heading</h1>
					<button onClick={this.switchNameHandler}>Switch Name</button>
					<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
					<Person name={this.state.persons[1].name} age={this.state.persons[1].age} />
					<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
					{/* goes on */}
				</div>
			);
		}
	}
	export default App;

In the setState() we will pass our person object in which we will just change our first name only … and other will remain as it is. It will not change the other elements outside the person array.
The react will see our state and it will check which part is overriding, we are changing persons. it will not discard other states but it will simply merge the old state with the new one and it will override. it will override the persons since we have defined a new version of persons in the setState.
So with that see what happens if we save file and execute our code. on the button click the data will be revised by the new version of persons object.
If you see the changes i.e DOM was updated because React recognized that the state of our application changes and that really is a special thing. There are many things which leads react to update the DOM. There actually are two changing state and what else you could already see it in action Props.

---

We change state that nice but keep in mind what we actually output for each person is defined in that Person component and there we don’t use state and as i said we can use it in Persons Component because this uses the function syntax.
In Persons component we use props and that the other thing that Reacts watches out for. If state changes or props changes, it analyzes to code it already rendered to DOM and the code it would now render if it were to re-render for everything and then it updates the existing DOM in all the places where it needs to update ut, to reflect your new state and props new state n App.jsand new props in Persons.js.