필터 함수를 이용한 고객 검색 기능 구현

handleValueChange 함수

상태 변경한다.

const handleValueChange = (e) => {
  setSearchKeyword(e.target.value);
}

InputBase

name: 검색 문구를 여기서 정한 이름으로 다루겠다.
value: 저장된 상태값

<StyledInputBase
  placeholder="검색하기"
  inputProps={{ 'aria-label': 'search' }}
  name='searchKeyword'
  value={searchKeyword}
  onChange={handleValueChange}
/>

필터링

const filteredComponents = (data) => {
  data = data.filter((c) => {
    return c.name.indexOf(searchKeyword) > -1;
  });
  return data.map((c) => {
    return (
      <Customer
      stateRefresh={stateRefresh}
      key={c.id}
      id={c.id}
      image={c.image}
      name={c.name}
      birthday={c.birthday}
      gender={c.gender}
      job={c.job}
      />
    )
  });
}