React-Native Javascript search array

Question

I am trying to search an Array by name and ingredients but I am really failing to do it. This is my first time using Search and React Native in general as well as my basic knowledge in javascript. Can someone help me out . I am getting an empty array.

This is an example of the Data when it is console.log:

Array [
    Object {
      "id": "VpcupAWap8RRIbLSt0ZuleCh2C22",
      "ingridients": Array [
        Object {
          "id": 1598773734254,
          "val": '3 ½ cups tomato sauce (800 g)'
        },
        Object {
          "id": 1598773734154,
          "val": '1 large onion, finely chopped'
        },
        Object {
          "id": 1598773734154,
          "val": '8 cloves garlic, minced'
        },
      ],
      "name": "Chicken Sandwich",
    },
]

This is my code :

import React, { useState } from "react";
import { SearchBar } from "react-native-elements";

const SearchScreen = (props) => {
    const [searchDetails, setSearchDetails] = useState();
    const [data, setData] = useState([]);
    const recipes = props.navigation.getParam('recipes')

    console.log(recipes)
    const searchFilterFunction=(text)=>{
        setSearchDetails(text)
        const newData = recipes.filter(
            item => { item.name === text}
        )
        setData(newData)
        }
        console.log(data)
    return (
        <View style={styles.container}>
            <SearchBar
                placeholder="Type Here..."
                onChangeText={(text) => searchFilterFunction(text)}
                value={searchDetails}
            />
        </View>
    );
};

export default SearchScreen;

Answer 1

here is the function to search your data by name and ingredients

const searchFilterFunction = (searchTerm) => {
  if (searchTerm) {
    setSearchDetails(searchTerm);
    const newData = foods.filter(({ name, ingredients }) => {
      if (RegExp(searchTerm, "gim").exec(name))
        return RegExp(searchTerm, "gim").exec(name);
      else
        return ingredients.filter(({ val }) =>
          RegExp(searchTerm, "gim").exec(val)
        ).length;
    });

    setData(newData);
  } else {
    setData([]);
  }
};

This function will first search for the foods by name if there no match then it searches on ingredients. I have tested this and this function works

Answer 2

Here's a simplified version of your app.

You could check the example here

import React, { useState } from "react";
import { View, StyleSheet, Text } from 'react-native'
import { SearchBar } from "react-native-elements";

const styles = StyleSheet.create({});

const recipes = ['chicken', 'potato', 'burger'];

const SearchScreen = (props) => {
    const [searchDetails, setSearchDetails] = useState('');
    const [data, setData] = useState(recipes);

    const searchFilterFunction=(text)=>{
        const newData = recipes.filter(item => item.includes(text.toLowerCase()))
        setData(newData)
    }


    return (
        <View style={styles.container}>
            <SearchBar
                placeholder="Type Here..."
                onChangeText={(text) => searchFilterFunction(text)}
                value={text => setSearchDetails(text)}
            />
            <View>
            {data.map(text => <Text>{text}</Text>)}
            </View>
        </View>
    );
};

export default SearchScreen;