Class
import React, { Component } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';
class App extends Component {
state ={
persons:[
{name:'Max' , age:28},
{name:'manu' , age:24},
{name:'Snie' , age:26}
],
otherstate:"some other state"
};
switchNameHandler = ()=>{
//console.log('Was Click!');
//Do not do this
//this.state.persons[0].name = 'Maximilian';
this.setState({persons:[
{name:'Max1' , age:281},
{name:'manu1' , age:241},
{name:'Snie1' , age:261}
]})
};
render(){
return (
<div className="App">
<h1>Hi i am a React App!</h1>
<p>It is working!</p>
<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}>My Hobbies: Racing</Person>
<Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
</div>
);
}
}
export default App;
Functional
import React, { useState } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';
const App = props=>{
const [ personsState, setPersonsState ] = useState({
persons:[
{name:'Max' , age:28},
{name:'manu' , age:24},
{name:'Snie' , age:26}
],
otherstate:"some other state"
}
);
console.log(personsState);
const switchNameHandler = ()=>{
//console.log('Was Click!');
//Do not do this
//this.state.persons[0].name = 'Maximilian';
setPersonsState({persons:[
{name:'Max1' , age:281},
{name:'manu1' , age:241},
{name:'Snie1' , age:261}
],
otherstate:personsState.otherstate
})
};
return (
<div className="App">
<h1>Hi i am a React App!</h1>
<p>It is working!</p>
<button onClick={switchNameHandler}>Switch Name</button>
<Person name={personsState.persons[0].name} age={personsState.persons[0].age}/>
<Person name={personsState.persons[1].name} age={personsState.persons[1].age}>My Hobbies: Racing</Person>
<Person name={personsState.persons[2].name} age={personsState.persons[2].age}/>
</div>
);
}
export default App;
使用多个usestate
import React, { useState } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';
const App = props=>{
const [ personsState, setPersonsState ] = useState({
persons:[
{name:'Max' , age:28},
{name:'manu' , age:24},
{name:'Snie' , age:26}
]
}
);
const [otherState,setOtherState]=useState('some other state');
console.log(personsState,otherState);
const switchNameHandler = ()=>{
//console.log('Was Click!');
//Do not do this
//this.state.persons[0].name = 'Maximilian';
setPersonsState({persons:[
{name:'Max1' , age:281},
{name:'manu1' , age:241},
{name:'Snie1' , age:261}
]
})
};
return (
<div className="App">
<h1>Hi i am a React App!</h1>
<p>It is working!</p>
<button onClick={switchNameHandler}>Switch Name</button>
<Person name={personsState.persons[0].name} age={personsState.persons[0].age}/>
<Person name={personsState.persons[1].name} age={personsState.persons[1].age}>My Hobbies: Racing</Person>
<Person name={personsState.persons[2].name} age={personsState.persons[2].age}/>
</div>
);
}
export default App;