0

This is my code which i am using to buld a search bar which shows me the result in the below of the search bar dynamically like facebook or Instagram do.But its not happening i tried multiple times but when i put value in the search it is calling once and then again i have refresh it to get the Api data.

import React, { useEffect, useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import searchScreen from './searchScreen';
import { View, Text, Dimensions, TextInput } from 'react-native';
import colors from '../../../res/colors';

export default function searchNavigator() {
  const Stack = createStackNavigator();
  const [text, setText] = useState("");
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    async function getData(text) {
      const api = 'http://188.166.189.237:3001/api/v1/profile/';

      await fetch(api + text)
        .then((response) => response.json())
        .then((responseJson) => {
          setDataSource(responseJson)
          console.log("Search Data", dataSource);
        })
        .catch((error) => {
          console.log("Seach error", error);
        })
    };
    getData();
  }, []);

This is the search input where i am putting the value of the search text which is connected to Api. It would be more appreciable if anyone can help me out with this, thanks in advance.

 <View style={{
              marginHorizontal: 5, marginVertical: 10, justifyContent: "center",
              alignItems: "center"
            }}>
              <TextInput
                style={{
                  backgroundColor: colors.textInputBackground,
                  height: 35,
                  width: Dimensions.get('screen').width - 10,
                  fontWeight: 'bold',
                  borderRadius: 10,
                  paddingStart: 20,
                  fontSize: 16,
                  color: 'white',
                }}
                onChangeText={(text) => setText(text)}
                placeholder="Search"
                placeholderTextColor={colors.textFaded2}
              />
            </View>
kazim ali
  • 139
  • 1
  • 8
  • What are you trying to do with `dataSource`? Are you seeing this `dataSource` state update ***outside*** the `useEffect` hook? BTW React state updates are asynchronously processed, you can't log it ***right*** after enqueueing an update and expect to see the updated state. Is that what you think isn't working? – Drew Reese Jan 11 '22 at 05:12

1 Answers1

2

You should add dependency to your useEffect. getData is not being called when you change search. The bellow code will run your useEffect whenever your text state changes.

useEffect(() => {
    async function getData(text) {
      const api = 'http://188.166.189.237:3001/api/v1/profile/';

      await fetch(api + text)
        .then((response) => response.json())
        .then((responseJson) => {
          setDataSource(responseJson)
          console.log("Search Data", dataSource);
        })
        .catch((error) => {
          console.log("Seach error", error);
        })
    };
    getData();
  }, [text]);
Jaid
  • 171
  • 4
  • Thanks for your answer i really appreciate that it is working now when ever i search but the thing is that data is retrieving only once. that is the main problem, Api is fetching the data only once,after that it is showing errors. Again i have to refresh the console and search then it is retrieving and that is also only one time. – kazim ali Jan 11 '22 at 05:24
  • Can you share the error in details ? – Jaid Jan 11 '22 at 05:26
  • error: {"message": "No profile found", "status": "fail"}. Like this Api message is showing if i run the search text second time. – kazim ali Jan 11 '22 at 05:27