Monsters-Rolodex 7 | search-box Component

search-box.component.jsx

Search-box 컴포넌트로 따로 떼보자. 

 

 

 

App.js

 

className, placeholder를 property로 빼는 이유는 

다른 곳에 이 SearchBox 컴포넌트를 사용했을 때

같은 className, placeholder를 사용하지 않을 것이기 때문에 뺀다. 

 

 

 

---

 

search-box.component.jsx

import { Component } from 'react';

class CardList extends Component {

render(props) {

const { monsters } = this.props;

return (

<div>{monsters.map(monster => (<h1 key={monster.id}>{monster.name}</h1>))}</div>

)

}

}

export default CardList;

 

 

 

App.js

import { Component } from 'react';

import CardList from './Components/card-list/card-list.component';

import SearchBox from './Components/search-box/search-box.component';

import './App.css'

class App extends Component {

constructor() {

super();

this.state = {

monsters: [],

searchField: ''

};

}

componentDidMount() {

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then((users) => {

this.setState(() => {

return { monsters: users };

})

})

}

onSearchChange = (event) => {

const searchField = event.target.value.toLocaleLowerCase();

this.setState(() => {

return { searchField };

})

}

render() {

const { monsters, searchField } = this.state;

const { onSearchChange } = this;

const filteredMonsters = monsters.filter((monster) => {

return monster.name.toLocaleLowerCase().includes(searchField);

});

return (<div className='App'>

<SearchBox

className={'search-box'}

placeholder={'search monsters'}

onChangeHandler={onSearchChange}

/>

<CardList

monsters={filteredMonsters}

/>

</div>

)

}

}

export default App;