state is a reserved property and can only be set in class-based components
class App extends Component {
state = {
person:[
{name:'Max', age: 28},
{name:'Manu', age: 29},
{name:'Stephanie', age: 26}
]
}
switchNameHandler = () => {
console.log('Was clicked');
this.setState({
person:[
{name:'Maximilian', age: 28},
{name:'Manu', age: 29},
{name:'Stephanie', age: 27}
]
});
}
render() {
//console.log(this.state.person[0]);
return (
<div className="App">
<h1>Hi, I'm a React App</h1>
<Person name={this.state.person[0].name} age={this.state.person[0].age}/>
<Person name={this.state.person[1].name} age={this.state.person[1].name}>My Hobbies: Racing </Person>
<Person name={this.state.person[2].name} age={this.state.person[2].name}/>
<button onClick={this.switchNameHandler}>Switch Name</button>
</div>
);
}
}