Searchbar functionality

I want to make a search bar and filter the data based on the “treeni” property. So if I type in “Jalkatreeni”, I want every Object that includes the property “treeni”: “Jalkatreeni” returned. How should I go about doing that? Thank you in advance! I have a data object like this:

Object {
  "pvm": "19. heinäkuuta 2021",
  "timestamp": 1626706912180,
  "treeni": "Jalkatreeni",
  "treeniData": Object {
    "Bulgarialainen askelkyykky": Object {
      "id": 2,
      "nimi": "Bulgarialainen askelkyykky",
      "sarjat": "3",
      "suoritusStats": Array [
        Object {
          "lisatiedot": "Per jalka",
          "painot": "10",
          "toistot": "20",
        },
        Object {
          "lisatiedot": "Per jalka",
          "painot": "15",
          "toistot": "20",
        },
        Object {
          "lisatiedot": "Per jalka",
          "painot": "30",
          "toistot": "25",
        },
      ],
    },
    "Jalkaprässi": Object {
      "id": 1,
      "nimi": "Jalkaprässi",
      "sarjat": "2-3",
      "suoritusStats": Array [
        Object {
          "lisatiedot": "Enkka!",
          "painot": "250",
          "toistot": "8",
        },
        Object {
          "lisatiedot": "Enkka!",
          "painot": "200",
          "toistot": "5",
        },
        Object {
          "lisatiedot": "Enkka!",
          "painot": "320",
          "toistot": "10",
        },
      ],
    },
    "Kyykyt": Object {
      "id": 0,
      "nimi": "Kyykyt",
      "sarjat": "2-3",
      "suoritusStats": Array [
        Object {
          "lisatiedot": "Lämppä",
          "painot": "60",
          "toistot": "15",
        },
        Object {
          "lisatiedot": "Lämppä",
          "painot": "100",
          "toistot": "8",
        },
        Object {
          "lisatiedot": "Enkka!",
          "painot": "150",
          "toistot": "5",
        },
      ],
    },
    "Lantionnosto": Object {
      "id": 3,
      "nimi": "Lantionnosto",
      "sarjat": "3",
      "suoritusStats": "",
    },
  },
}

I’m doing this in React-Native and using FlatList to render the data, so here’s the rest of my code in case it’s relevant.

export default function TehdytHae() {
  const [loading, setLoading] = useState(false);
  const [defaultData, setDefaultData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    setLoading(true);
    const db = firebase.firestore();
    const { currentUser } = firebase.auth();

    db.collection('users')
      .doc(currentUser.uid)
      .collection('treenidata')
      .orderBy('timestamp', 'desc')
      .get()

      .then((snapshot) => {
        snapshot.docs.map((dbData) => {
          setDefaultData(dbData.data());
          setLoading(false);
        });
      });
  }, []);

  const updateInput = (input) => {
   //filtering here
  };

  const SearchView = ({ item }) => {
    return <Text>{item.treeni}</Text>;
  };

  return (
    <View style={{ flex: 1 }}>
      <TextInput placeholder="Search" input={input} onChangeText={updateInput} />
      <FlatList data={filteredData} keyExtractor={(item) => item.treeni} renderItem={SearchView} />
    </View>
  );
}

Answer

You can make functions that will give you search results like below. You can pass the name that you want to search in handleSearch function

function getResult(name) {
const nameUpper = name.toUpperCase();
const resultArray = [];
defaultData.map(data => {
  if (data. treeni.toUpperCase().includes(name)) {
    resultArray.push(data);
  }
});
return resultArray;
}


 const handleSearch = (text) => { 
var aux = getResult(text);
var servicesArray = [...new Set(aux)];
if (text === '') {
  setFilteredData(data);
} else {
  setFilteredData(servicesArray);
}
};