Wait for API call data before render react hooks

Question

I make an API call.

It appears React goes ahead to build a table without the data, thus throwing error of

Uncaught TypeError: Cannot read property 'map' of undefined

Here's what I'm doing

useEffect() pretty straightforward

  const [data, setData] = useState();
  const [isBusy, setBusy] = useState()

  useEffect(() => {
    setBusy(true);
    async function fetchData() {
      const url = `${
        process.env.REACT_APP_API_BASE
        }/api/v1/endpoint/`;

      axios.get(url).then((response: any) => {
        setBusy(false);
        setData(response.data.results)
        console.log(response.data.results);
      });
    }

    fetchData();
  }, [])

Then I'm trying to render a table using the data from the API call above (as and when it becomes available)

            <div className="col-md-12 mt-5">
              {isBusy ? (
                <Loader />
              ) : (
                  <table className="table table-hover">
                    <thead>
                      <tr>
                        <th scope="col">Pharmacy User Full Name</th>
                        <th scope="col">Tests This Month</th>
                        <th scope="col">Tests This Week</th>
                        <th scope="col">Last Test Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.map((item: any, index: any) => {
                        return (<tr>
                          <th scope="row" key={index}>{item.name}</th>
                          <td>Mark</td>
                          <td>Otto</td>
                          <td>@mdo</td>
                        </tr>
                        )
                      })}

                    </tbody>
                  </table>
                )}
            </div>

The above appears intuitive enough for me. So not sure what I need to do. Thanks.

@Konstantin Uncaught (in promise) TypeError: Cannot read property 'map' of undefined — KhoPhi
– KhoPhi, Commented Nov 20, 2019 at 14:40
I think @Vencovsky solution should work for you. Remember that you might need to parse the results received first with .json() — Konstantin
– Konstantin, Commented Nov 20, 2019 at 14:42

Vencovsky · Accepted Answer · 2019-11-20 14:40:15Z

11

You should set isBusy to true in the useState initial value

//                            initial value
const [isBusy, setBusy] = useState(true)

And also check data before data.map

// checking data
{data && data.map((item: any, index: any) => {
    return (<tr>
      <th scope="row" key={index}>{item.name}</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    )
})}

answered Nov 20, 2019 at 14:40

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

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

4 Comments

KhoPhi Over a year ago

Combining both now. The checking data part too very important. Thanks for pointing that out too. Will keep in mind

lhumanl Over a year ago

@Vencovsky - Can you pls explain why Do we check for data before data.map? Is it to make sure if data is present or not?

Vencovsky Over a year ago

@lAaravl is because data could be undefined and if you do data.map without checking if data is truthy, you might get an error saying

cannot read property map of undefined. You also might ask "How will data be undefined?" and the reason why it can be undefined is that the

data` state is initialized as undefined in const [isBusy, setBusy] = useState() (empty parameter in useState is passing undefined as the initial state.

Vencovsky Over a year ago

@lAaravl a much better check would be Array.isArray(data) && data.map(...) so it would only work if data is actually an array, but in this case, only doing data && data.map(...) will work also.

Dupocas · Accepted Answer · 2019-11-20 14:38:24Z

3

useEffect will only set isBusy to true after the component tries to render(too late). Remember that useEffect only runs after the browser finishes painting. So the first assertion of isBusy is undefined which evaluates to false

Define true as initial state of isBusy

const [isBusy, setBusy] = useState(true)

Or check for the existence of data instead of isBusy

answered Nov 20, 2019 at 14:38

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

1 Comment

fIwJlxSzApHEZIl Over a year ago

What if we're not using useState but instead useEffect and waiting for an API call to finish before rendering?

ApplePearPerson · Accepted Answer · 2019-11-20 14:39:08Z

2

Your setBusy(true); happens inside the useEffect. The useEffect will execute after your first render so this is too late.

I recommend setting isBusy to true by default via the parameter of useState:

const [isBusy, setBusy] = useState(true);

You then don't need to set it to true inside the useEffect anymore.

answered Nov 20, 2019 at 14:39

ApplePearPerson

4,4674 gold badges24 silver badges37 bronze badges

Comments

Sprose · Accepted Answer · 2023-06-08 13:49:02Z

You can remove the isBusy state variable entirely as it just replicates data. Unless you later decide to do something fancy like 'load more data', then I think it just complicates things.

<div className="col-md-12 mt-5">
  {!data? (
    <Loader />
  ) : (
     <table className="table table-hover">
        <thead>
          <tr>
            <th scope="col">Pharmacy User Full Name</th>
            <th scope="col">Tests This Month</th>
            <th scope="col">Tests This Week</th>
            <th scope="col">Last Test Date</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item: any, index: any) => {
            return (<tr>
             <th scope="row" key={index}>{item.name}</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
           )
          })}
       </tbody>
     </table>
   )}
</div>

In the above, if there is no data !data then it will show the loader. Once data gets populated it will render your table with the loaded data.

Hope this helps.

Collectives™ on Stack Overflow

Wait for API call data before render react hooks

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related