I was trying to create a search bar that will appear an list that are same in then what it type.
But it always given me error in filter with Array.prototype.filter() expects a value to be returned at the end of arrow function .
The code :
const [data, setData] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const loadData = async () => {
await fetch("https://fakestoreapi.com/products/")
.then((response) => response.json())
.then((ReceivedData) => setData(ReceivedData));
};
useEffect(() => {
loadData();
}, [searchTerm]);
The Return:
<>
<input type="search" placeholder="Search" aria-label="Search" value ={searchTerm}
onChange={(e) =>{props.setSearchTerm(e.target.value)}}/>
{data.filter((datas) => {
if (searchTerm === ""){
return datas
} else if (datas.title.toLowerCase().include(searchTerm.toLowerCase())){
return datas
}
}).map(datas => {
return (
<div key={datas.title}>
<img src={datas.image} alt={datas.image} />
<div>
<h5>{datas.title}</h5>
<h5>{datas.category}</h5>
<h6>$ {datas.price}</h6>
</div>
</>