How to set local array to global react?

Question

I have an array of Names(Commented in code):=

export default Main_homepage = (props) => {
 var Names = []

       useEffect(() => {
            fetch('https://www.amrutras.com/Items.php')
                .then((response) => response.json())
                .then((responseJson) => {
                    {
                        Names = responseJson //***Names Array***
                        console.log(Names[0].ID) //****Its working, I am getting outpu for this in console
                        console.log(Names[0].Name)
                    }   
                })
                .catch((error) => {
                    console.error(error)
                })
        })
return(
     <View>{console.log(Names[0].ID)}</View>  //****Its not working.
)
}

But when I am trying to access outside of the use effect it's not working.

In short, I am trying to access the response array in JSX.

Besides not using the features React providers for you with `useState` hooks, your approach is also a problem in "regular" JS. Refer to https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call for more information. — nbokmans, Mar 08 '21 at 10:17

score 1 · Answer 1 · answered Mar 08 '21 at 10:15

So this is an asynchronous call and it will not work because after the return statement is sent out, the value gets changed.

Change Names into a state hook - Using the State Hook:

// Remove this
// var Names = []
// Replace with:
const [Names, setNames] = useState([]);

And when you're updating, use setNames:

// Remove this inside the promise
// Names = responseJson
// Replace with the following:
setNames(Names);

If you want to understand what an asynchronous call, read more at How do I return the response from an asynchronous call?

score 1 · Accepted Answer · answered Mar 08 '21 at 10:26

As suggested by Praveen Kumar sir, utilize useState hook.

Here is the Full Working Example: Expo Snack

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default App = (props) => {
  const [names, setNames] = useState([]);

  useEffect(() => {
    fetch('https://www.amrutras.com/Items.php')
      .then((response) => response.json())
      .then((responseJson) => {
        {
          console.log(responseJson);
          setNames(responseJson); //***Names Array***
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
  return (
    <View style={{ marginTop: Constants.statusBarHeight }}>
      <Text>{JSON.stringify(names)}</Text>
    </View>
  );
};

How to set local array to global react?

2 Answers2