How to render a React Component only after finishing a certain operation?

Question

I want to display some properties of a JSON object which are in a locally stored JSON file. So, I'm trying like this:

import { DistroList as distroList } from '../backend/distroList.json'

 useEffect(() => {
    
    for(let distro in distroList) {
        if(distroList[distro].Name === distroName) {
            setDistroFeature(distroList[distro])
        }
    }

}, [])

return (
    <div>
        <h1>{distroFeature.Origin}</h1>
    </div>
)

Since the for loop takes time to find the matched object and the component is mounted by then, I'm getting the error as

TypeError: Cannot read property 'Origin' of null

I tried to use fetch API and tried hard to make it asynchronous. I couldn't do it. I want to do something like this:

import { DistroList as distroList } from '../backend/distroList.json'

 useEffect(() => {

    // Fetch the object from distroList.json
    // Update state variable

}, [])

return(
    Display the updated state variable
)

How do I achieve it?

Thanks in advance :)

Convert from distroFeature.Origin to distroFeature?.Origin — Loi Nguyen Huynh
– Loi Nguyen Huynh, Commented Jun 7, 2021 at 9:14

M.Hassan Nasir · Accepted Answer · 2021-06-07 09:17:21Z

4

One of the following solutions might work for you.

First solution.

<div>
   {distroFeature && <h1>{distroFeature.Origin}</h1>}
</div>

Second solution.

<div>
   <h1>{distroFeature?.Origin}</h1>
</div>

answered Jun 7, 2021 at 9:17

M.Hassan Nasir

8615 silver badges14 bronze badges

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

4 Comments

Chaaru Manjuraj Over a year ago

That works, thanks for the help. But, I'm actually rendering a bunch of properties like distroFeature.Origin in a table. Some of the properties aren't rendering and the <td> will be blank. How can I fix that?

M.Hassan Nasir Over a year ago

Use a ? with distroFeature wherever you are using it.

Chaaru Manjuraj Over a year ago

A combination of these is working. I have to mention distroFeature in the useEffects() and have a ternary operator in the return. Thank you so much for the help.

M.Hassan Nasir Over a year ago

I'm glad it helped :)

EvaBat · Accepted Answer · 2021-06-07 09:21:58Z

1

You should add the distroList as a parameter inside your useEffect hook. This way, it will re-run the effect when the value of the distroList is changed (to "not undefined" in this case).

This should work:

import { DistroList as distroList } from '../backend/distroList.json'

 useEffect(() => {
    if (distroList && distroList.length > 0) {
        for(let distro in distroList) {
          if(distroList[distro].Name === distroName) {
              setDistroFeature(distroList[distro])
          }
      }
    }


}, [distroList])

return (
    <div>
        <h1>{distroFeature.Origin}</h1>
    </div>
)

answered Jun 7, 2021 at 9:21

EvaBat

9129 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to render a React Component only after finishing a certain operation?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related