Search Filter Component

Question 1

What is the basic react framework for SearchFilter?

Answer 1

const SearchFilter = () => {
return (
<div>
Search: 
</div>
)}

export default SearchFilter;

Question 2

Create the handleSearch function part 1

Answer 2

1. Create dummy list array of variables
2. Import useState from react

const [filterList, setFilterList] = useState(list);

const handleSearch = (event) => {
if (event.target.value === “”) {
setFilterList(list);
return;
}

Question 3

handleSearch function part 2 (filtered values)

Answer 3

const filteredValues = list.filter(
(item) => item.toLowerCase().indexOf(event.target.value.toLowerCase() ) ==! -1
);
setFilterList(filterValues);
};

Question 4

Return the filtered list

Answer 4

After the <div> in the return statement:
{filterList && 
filterList.map((item, index) => (
<div>{item}</div>
))}
</div>