TypeError: Cannot read properties of undefined (reading 'filter') and undefined error - React

Question

I have a problem with my API call. I want to create a search bar for my project and the data comes from an API. But, when I add a filter function I am getting an error.

TypeError: Cannot read properties of undefined (reading 'filter')

To fix it, I added optional chaining operator and it didn't work either because I get "undefined". Also, to catch the value I used a useEffect hook but I am not sure whether it is the right solution. I think my component is rendered before my API call is not executed. Can you help me to fix it?

This is my main component:

import "../App.css"
import APICall from "./APICall.js"
import Filter from "./Filter.js"
import {useState} from "react"

function App() {
  const [datum, setDatum] = useState([])
  
  return (
    <div className="App">
      <Filter datum={datum} />
      <APICall setDatum={setDatum} />
    </div>
  )
}

export default App

This is child component when I make API call:

import React from 'react'
import axios from "axios"
import { useState, useEffect } from 'react'

function APICall({setDatum}) {
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchAPI = async () => {
      setLoading(true)
      try {
        const res = await axios(`https://api.spoonacular.com/food/products/search?query=yogurt&apiKey=`)
        setDatum(res.data.products)
        // console.log(datum)
      }
      catch(err) {
        console.log(err)
      }
      setLoading(false)
    }
    fetchAPI()
  }, [])

  if (loading === true) {
    return <div>Loading...</div>
  }
}

export default APICall

This is another child component I have a problem with:

import {useState, useEffect} from "react"

function Filter({datum}) {
  const [filterText, setFilterText] = useState("")

  const handleInput = (e) => {
    setFilterText(e.target.value)
  }

  useEffect(() => {
    const handleFilter = async () => {
      try {
         const filtered = await datum.title?.filter(item => {
          return Object.keys(item).some(key => 
           item[key].toString().toLowerCase().includes(filterText.toLocaleLowerCase())
          )
        })
        console.log(filtered)
      }
      catch (err) {
        console.log(err)
      }
    }
    handleFilter()
  }, [filterText])

  
  return (
    <div>
      <input type="text" placeholder="Please enter the name of the the food" onChange={handleInput} value={filterText} />

      {datum.map((el, id) => (
        <div key={id} className="items">
          <img src={el.image} alt={el.title} />
          <p>{el.title}</p>
        </div>
     ))}
    </div>
  )
}

export default Filter

Edited This is the some data I get from API:

0: {id: 201369, title: 'Yoplait Yogurt, Lactose Free Yogurt, Peach, 6.0 oz', image: 'https://spoonacular.com/productImages/201369-312x231.jpeg', imageType: 'jpeg'}
1: {id: 415304, title: 'Noosa Key Lime Finest Yoghurt, 8 OZ', image: 'https://spoonacular.com/productImages/415304-312x231.jpeg', imageType: 'jpeg'}
2: {id: 89557, title: 'Yoplait Light Yogurt with Granola, Blueberry, Fat Free, 12 oz, 2 Cups', image: 'https://spoonacular.com/productImages/89557-312x231.png', imageType: 'png'}

Answer 1

I had to make a lot of changes for this to work. Some notes: you wanted to filter by the title, so you did datum.title.filter datum is an array, it doesn't have the title property, that's why you are getting undefined. You had to use datum.filter , and filter function is not a promise, you don't need to use await . I also created another state for the filtered, and let the original data untouched, to be able to reset the itens to the original items, otherwise if you filtered the original itens, they would be lost. I made the code in Filter.js more simple, no need of useEffect, when you type you change the state of filteredDatum and the list get filtered, i also a nice search logic, to search for separate words, for example if the title is "yougurt lactose 100", if the search is "yog 100" it will find

App.js

import "../App.css";
import APICall from "./APICall.jsx";
import Filter from "./Filter.jsx";
import { useState } from "react";

function App() {
  const [datum, setDatum] = useState([]);
  const [datumFiltered, setDatumFiltered] = useState([]);

  return (
    <div className="App">    
      <Filter datum={datum} datumFiltered={datumFiltered} setDatumFiltered={setDatumFiltered} />
      <APICall setDatum={setDatum} setDatumFiltered={setDatumFiltered} />
    </div>
  );
}

export default App;

Filter.js

function Filter({ datum, datumFiltered, setDatumFiltered }) {
  const handleFilter = (e) => {
    const filterText = e.target.value.toLowerCase();
    const wordsToFilter = filterText.split(" ");
    datumFiltered = datum.filter((item) => {
      return wordsToFilter.every((word) => item.title.toLowerCase().includes(word));
    });
    setDatumFiltered(datumFiltered);
  };

  return (
    <div>
      <input type="text" placeholder="Please enter the name of the the food" onChange={handleFilter} />

      {datumFiltered.map((el, id) => (
        <div key={id} className="items">
          <img src={el.image} alt={el.title} />
          <p>{el.title}</p>
        </div>
      ))}
    </div>
  );
}

export default Filter;

APICall.js

import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";

//REMOVE THIS FUNCTION
const axiosDummyCall = async () => {
  return [
    {
      id: 201369,
      title: "Yoplait Yogurt, Lactose Free Yogurt, Peach, 6.0 oz",
      image: "https://spoonacular.com/productImages/201369-312x231.jpeg",
      imageType: "jpeg",
    },
    {
      id: 415304,
      title: "Noosa Key Lime Finest Yoghurt, 8 OZ",
      image: "https://spoonacular.com/productImages/415304-312x231.jpeg",
      imageType: "jpeg",
    },
    {
      id: 89557,
      title: "Yoplait Light Yogurt with Granola, Blueberry, Fat Free, 12 oz, 2 Cups",
      image: "https://spoonacular.com/productImages/89557-312x231.png",
      imageType: "png",
    },
  ];
};

function APICall({ setDatum, setDatumFiltered }) {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchAPI = async () => {
      setLoading(true);
      try {
        let datum = await axiosDummyCall(); //REPLACE WITH REAL CALL
        setDatum(datum);
        setDatumFiltered(datum);
      } catch (err) {
        console.log(err);
      }
      setLoading(false);
    };
    fetchAPI();
  }, []);

  if (loading === true) {
    return <div>Loading...</div>;
  }
}

export default APICall;

Answer 2

About the second state:

If you have only one state, for example: ['yogurt', 'yogurt fat free', 'ketchup'] , if you type yogurt , the state will change to ['yogurt', 'yogurt fat free'] , the item ketchup was lost. If you continue typing yogurt fat , now the state was changed again to ['yogurt fat free'] , the itens yogurt and ketchup were lost. You now for example clear the filter to show all itens again, the only item that will appear now is yogurt fat free , because the original state was changed and the other itens were lost. You would have to do another API call do fill the list again.

That's why I added a second state, so that the full list is not touched, and you can always get all itens back again.