Need to render after the function is executed React js

Question

I am trying to fetch some data from API gateway and use that to render a tree but i'm not able to do so. Here is what i am trying

var structure = [

];

export default function App() {
  
  React.useEffect(() => {
    
    async function fetchData() {
      const res = await axios.get(`Some API_GATEWAY Request`)
      structure.push(JSON.parse(res['data']))
      console.log(structure[0])
    }
    
    fetchData();
    console.log(structure[0])
  }, []);

  return (
    <div className="App">
      {console.log(structure[0])}
      <Tree data={structure} />
    </div>
  );
}

Here the output is

undefined //from 3rd console.log
undefined //from 2nd console.log
some value //from 1st console.log

how to get the value inside the return so that i can use the strucutre

fetchData().then(() => { console.log(structure[0]); }) will show some value and to have it rendered you need a reference. Basically fetchData is asynchronous but you are accessing structure[0] before it gets populated which is ... asynchronously. — Andrea Giammarchi
– Andrea Giammarchi, Commented Jan 21, 2021 at 8:32
@AndreaGiammarchi can you show some example on how to render it using reference I have never used it — ankur suman
– ankur suman, Commented Jan 21, 2021 at 8:56

Tigran Petrosyan · Accepted Answer · 2021-01-21 14:39:46Z

1

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [catties, setCatties] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchCats = async () => {
    setLoading(true);
    const res = await axios.get("https://api.thecatapi.com/v1/images/search");
    setLoading(false);
    setCatties([...catties, ...res.data]);
  };

  useEffect(() => {
    fetchCats();
  }, []);

  if (loading) {
    return <h1> ...loading</h1>;
  }

  return (
    <div>
      {catties.map(el => (
        <img src={el.url} alt="Catty" key={el.id} />
      ))}
    </div>
  );
};

export default App;

Run this code in codesandbox, you will see how it works. This is a standrat clean way of doing this. Usually you want to keep these kind of functions inside of redux or context. Please let me know if this worked for you.

edited Jan 21, 2021 at 14:39

answered Jan 21, 2021 at 12:21

Tigran Petrosyan

6106 silver badges15 bronze badges

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

Comments

Tigran Petrosyan · Accepted Answer · 2021-01-21 08:39:48Z

0

2 things you can do:

make structure array a part of your state:
You can create that function above useEffect, and call it inside. So code will look like this:

 export default function App() {
       const [structure, setStructure] = React.useState([]);
       async function fetchData() {
           const res = await axios.get(`Some API_GATEWAY Request`)
           setStructure(JSON.parse(res['data']))
            console.log(structure[0])
       }                
          React.useEffect(() => {    
            fetchData();
          }, []);            
          return (
            <div className="App">
              {console.log(structure[0])}
              <Tree data={structure} />
            </div>
          );
        }

answered Jan 21, 2021 at 8:39

Tigran Petrosyan

6106 silver badges15 bronze badges

3 Comments

ankur suman Over a year ago

I tried this but it never executed the fetchData function

Tigran Petrosyan Over a year ago

can you please provide your api which you are trying to call? I will try too and send back the result

ankur suman Over a year ago

sorry but i can't provide you that API

Collectives™ on Stack Overflow

Need to render after the function is executed React js

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related