How to display json data on screen based on user input expo react-native

user_13517054 0
Viewed 705

I have some json data that I fetch from api and display on the iOS simulator based on user input.

There is a searchbar at the top of screen where user can type any symbol values in it and it should display that specific value on the screen.

My json data: 

 Object {
    "name": "Chesapeake Energy",
    "symbol": "CHK",
  },
  Object {
    "name": "C. H. Robinson Worldwide",
    "symbol": "CHRW",
  },

Hence, if user type CHK it should display symbol and name as shown below: 

CHK
Chesapeake Energy

My code: 

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Keyboard,
  FlatList,
  TextInput,
  Button,
  Text,
} from "react-native";
import { useStocksContext } from "../contexts/StocksContext";
import { scaleSize } from "../constants/Layout";
import { Ionicons } from "@expo/vector-icons";

import { ListItem } from "react-native";

export default function SearchScreen({ navigation }) {
  const { ServerURL, addToWatchlist } = useStocksContext();

  const [state, setState] = useState({
    /*  initial state here */
    myListData: [],
    search: "",
  });



  useEffect(() => {
    renderWithData();

  }, []);

  renderWithData = () => {
    return fetch("http://131.181.190.87:3001/all")
      .then((res) => res.json())
      .then((json) => {
        setState({
          isLoaded: true,
          myListData: json,
        });
        setTimeout(() => {
          console.log(json);
        }, 1000);
      });
  };

  let onChangeText = (event) => {
    setState({ search: event }); //here it does not set the value of event(userinput) to search

  };



  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <TextInput
          style={styles.textinput}
          placeholder="Search here"
          placeholderTextColor="white"
          onChangeText={(search) => onChangeText(search)}
        />


      </View>
    </TouchableWithoutFeedback>
  );
}

My question is how do I write my onChangeText() so I can display the symbol and name on screen based on user input.

 let onChangeText = (event) => {
        setState({ search: event }); //here it does not set the value of event(userinput) to search

      };

Here I am trying to set the user value (event) to the search, but it does not set the value to it, but if I print event I can see whatever user types in my console. How do I display the symbol and name based on what user types? Is there a way to filter those?

expo react-native reactjs filter json
1 Answers

Yes. There is a filter fucntion in javascript.

At first, you must store you JSON user list in state or in somewhere, like

userlist: []

then your onChangeText

onChangeText = {(event) => {
  let result = userlist.filter((item) => {
    return item.symbol === event
  });

  // result is an array contains your users that have symbol in your input.
  // Handle your result.
}}

You can find more in here:

https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

That it. Hope that help. :)

user_118886580
Related