问题描述
class App extends Component{
// whatever written inside the constructor can be accessed anytime (properties)
constructor(){
super(); //it calls constructor method on component class
this.state = {
monsters: [],
searchField: ''
}
}
componentDidMount(){
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => this.setState( {monsters : users}))
}
render(){
const { monsters, searchField} = this.state ;
const filteredMonster = monsters.filter(monster =>
monster.name.toLowerCase().includes(searchField.toLowerCase())
);
return (
<div className= "App">
<SearchBox
placeholder = 'Search monsters'
handleChange = {
e => this.setState({ searchField: e.target.value})
}/>
<CardList monsters = {filteredMonster}/>
{/**map returns fn iterated over all the elments present inside the object, in this case monsters. */}
</div>
);
}
}
export default App;
标签: javascriptreactjsmern
解决方案
推荐阅读