Array.prototype.filter() expects a value to be returned at the end of arrow function on React

Viewed 34

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>

</>
0 Answers
Related