Access individual object's values from an array of objects React Native

Question

I'm having a problem trying to access some values of an object inside an array that I receive as a response from an Axios Get method.

I want to have access to values like id, dateTime, sensorData of each object of the array separately, like result[0].id (dateTime, sensorData, etc).

Part of my code:

 const ShowSensorsScreen = ({ navigation }) => { const [ result, setResult ] = useState([]); const id = navigation.getParam('id'); useEffect(() => { getResult(id); }, []); const getResult = async id => { const response = await searchApi.get(`/sensorData/${id}`); setResult(response.data); }; console.log(result[0]); return ( <ImageBackground source={backgroundImage} style={styles.ImageBackground}> <Bar> <Text style={styles.textStyle}> {result[0].dateTime} </Text> </Bar> <SensorsDetail evaluation={result} /> </ImageBackground> ); };

Using a console.log(result) or even console.log(result[ index ]) everything runs fine but trying with result[0].id gets an error saying undefined is not an object...

Sample from console.log(result):

 Array [] Array [ Object { "sensorData01": "100.00000", "sensorData02": "101.00000", "sensorData03": "102.00000", "sensorData04": "103.00000", "dateTime": "2020-01-06T23:10:56Z", "id": 1, "idEvaluation": 1, }, Object { "sensorData01": "110.00000", "sensorData02": "111.00000", "sensorData03": "112.00000", "sensorData04": "113.00000", "dateTime": "2020-01-06T23:11:16Z", "id": 2, "idEvaluation": 1, }, ]

And from console.log(result[0]):

 undefined Object { "dadosSensor01": "100.00000", "dadosSensor02": "101.00000", "dadosSensor03": "102.00000", "dadosSensor04": "103.00000", "dataHora": "2020-01-06T23:10:56Z", "id": 1, "idAvaliacao": 1, }

I would thank any sort of help I can get on this!

Answer 1

The problem is setResult (hooks) is async and you are printing result.data before the state is set. Try the below to print once you have set the correct data in result.

React.useEffect(() => {
    console.log(result[0]);
  }, [result]);

const searchApi = async (searchAppointment) => {
       console.log('Searching appointment...');
       setIsLoading(true);
       try {
               const response = await baseURL.get(
                   `/sensorsData/${searchAppointment}`);
           console.log(response.data[0]);
           setResult(response.data);
           console.log(result[0])
       } catch (err) {
           console.log(err);
           setErrorMessage('Something went wrong, please try again later...');
       }
       setIsLoading(false);
   };

Please refer this for useState callbacks - useState callbacks

Answer 2

So I've got help from another post and it turns out that to do what I needed I had to use .map() and it got like this:

 const sensor01 = avaliacao.map((item) => item.dadosSensor01); const sensor02 = avaliacao.map((item) => item.dadosSensor02); const sensor03 = avaliacao.map((item) => item.dadosSensor03); const sensor04 = avaliacao.map((item) => item.dadosSensor04);

If anyone has any better other way I would love to hear it, for now, I thank you all for the amazing support!