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;

const newData = recipes.filter(item => item.name === text) try doing this? — Prateek Thapa
– Prateek Thapa, Commented Aug 30, 2020 at 13:41
But it won't go into the new array or even search the ingridients please show me I don't know what I'm doing at all — Dilhan Bhagat
– Dilhan Bhagat, Commented Aug 30, 2020 at 13:50

U.A · Accepted Answer · 2020-09-02 01:30:05Z

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

edited Sep 2, 2020 at 1:30

answered Aug 30, 2020 at 14:23

U.A

3,4233 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dilhan Bhagat Over a year ago

Wow thank you so much for your answer this is exactly what I was trying to do. How would I edit this code to only show the searched results and not all the foods before anything is even searched. Again thank you for you answer

Prateek Thapa · Accepted Answer · 2020-08-30 13:58:58Z

0

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;

answered Aug 30, 2020 at 13:58

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

3 Comments

Dilhan Bhagat Over a year ago

Hi thank you for your answer are you able to change the recipe to an array of objects because that’s what I am finding difficult

Prateek Thapa Over a year ago

yeah you can just insert your array here and change the search function

Prateek Thapa Over a year ago

const newData = recipes.filter(item => item.text.toLowerCase().includes(text.toLowerCase())) Something like this

Collectives™ on Stack Overflow

React-Native Javascript search array

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related