In the last lesson, we learn a lot about state and props, we learn these are the only two things which lead React to upgrade your DOM if something changed.

Functional (Stateless) vs class (Stateful) Components

Now I also mention that when creating a component as a function as we have done for a Person component. We cant use state in there because of it just a function where we return some JSX code.
Granted we could run other code before doing that and you often do that if you need to transform your props for us or something like that but you can’t set up a state property, you cant call the setState() because it is not a class extending component.
The setstate() method is not known and we don’t have methods anyways its not a class, it is a function. And still I mentioned that you should use the function form of components as often as possible and I will emphasize that here one more time, why it is so Important?

The function based component which are just functions receiving props and very clear about what they do.
They only render something to the DOM. they are dynamic because of the props and you can add some additional logic prior to calling return but and that’s super important. They don’t manipulate your application state, as your application grows you will see that this is not so unimportant, this is actually really important.
Most part of you application should not change the application state that should just render something to the DOM. Dynamic , YES!. But they should not allow you to change your application state.
Your application state should only be changed and handeled in a few selected components also referred to as containers. App.js would be such a container. that just another name it is a component but we refer to it as container because it contains some part of our application state.

...
class App extends Component {
	state = {
		persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
	};
	switchNameHandler = () => {
		this.setState({
			persons: [{ name: 'Lucy Stifert', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
		});
	};
	render() {
		return (
			<div className="App">
				<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} />
			</div>
		);
	}
}
export default App;

in our Demo application actually all of the application state where we cant change something about our app and then we pass changes down to our application i.e. setState({}) for example Person component that it.
The changes happen in App.js and once we start building the course project you will see me use this pattern. I will have a few components where the state actually lives and get changed and a lot of components which takes some inputs and then just render something to the screen but which won’t directly manipulate the state.

Still you might have cases where maybe you all want to listen to an event in the person component or in another component.
Now ofcourse turn the Person component in to a component which extends Components class so that you can find methods which you execute but maybe you want to listen to any event in Person component but execuate method in App.js so that you can keep that pattern of changing the name in App.js but actually listning to the event in the other component.

---

let’s have a look how we can handle this and change a state from another component in the next lesson