Problem with conditional rendering with React

Question

I don't really have an error but I'm not getting the desired outcome. I have a Flask API as my backend. It returns JSON data, this data is then passed to the React frontend to be displayed after certain actions such as a button click.

The Flask backend is working fine, the data is being sent to the React frontend and I can use console.log(data) to see it in the console.

The issue is I tried doing something to make it so that while the data is being fetched from the API, I want a message such as "Loading..." to be displayed.

Here's what I did in that regard.

const [data, setData] = useState([{}])

useEffect(() =>{
  fetch("/details").then(
    res => res.json()
  ).then(
    data => {
      setData(data)
      console.log(data)
    }
  )
}, [])

That console.log(data) does show my the JSON response in the console.

Then I do this for the display.

return (
  <div>
    ...
    <div>
      {(typeof data.members === 'undefined') ? (
        <p>Loading...</p>
      ) : (
        data.members.map((member, i) => (
          <p key={i}>{member}</p>
        ))
      )}
    </div>
  </div>
);

This is supposed to display "Loading..." while the data is being fetched and then display the data. But it keeps displaying "Loading..." even though my data was fetched and it's never displayed.

I tried what emrich said and got this error TypeError: Cannot read properties of undefined (reading 'map')

App
D:/React/Candetect/src/App.jsx:32
  29 | <FileList files={files} removeFile={removeFile} />
  30 | <div>
  31 | {(data.length === 0) ? (
> 32 |   <p>Loading...</p>
     | ^  33 | ) : (
  34 |   data.members.map((member, i) => (
  35 |     <p key={i}>{member}</p>

D:/React/Candetect/src/App.jsx:15
  12 |   res => res.json()
  13 | ).then(
  14 |   data => {
> 15 |     setData(data)
     | ^  16 |     console.log(data)
  17 |   }
  18 | )

This is the object from the backend

{
    "Information": [
        {
            "college_name": null,
            "company_names": [
                "Marathwada Mitra Mandal’s College of Engineering"
            ],
            "degree": [
                "B.E. IN COMPUTER ENGINEERING"
            ],
            "designation": [
                "Machine Learning",
                "TECHNICAL CONTENT WRITER",
                "Schlumberger\nDATA ENGINEER"
            ],
            "email": "[email protected]",
            "experience": [
                "Schlumberger",
                "DATA ENGINEER",
                "July 2018 - Present",
                "• Responsible for implementing and managing an end-to-end CI/CD Pipeline with custom validations for Informatica migrations which",
                "Pune, Maharashtra, India",
                "brought migration time to 1.5 hours from 9 hours without any manual intervention",
                "• Enhancing, auditing and maintaining custom data ingestion framework that ingest around 1TB of data each day to over 70 business",
                "units",
                "• Working with L3 developer team to ensure the discussed Scrum PBI’s are delivered on time for data ingestions",
                "• Planning and Executing QA and Production Release Cycle activities",
                "Truso",
                "FULL STACK DEVELOPER INTERN",
                "• Created RESTful apis",
                "• Tried my hands on Angular 5/6",
                "• Was responsible for Django backend development",
                "Pune, Maharashtra, India",
                "June 2018 - July 2018",
                "Propeluss",
                "DATA ENGINEERING INTERN",
                "• Wrote various automation scripts to scrape data from various websites.",
                "• Applied Natural Language Processing to articles scraped from the internet to extract different entities in these articles using entity",
                "Pune, Maharashtra, India",
                "October 2017 - January 2018",
                "extraction algorithms and applying Machine Learning to classify these articles.",
                "• Also applied KNN with LSA for extracting relevant tags for various startups based on their works.",
                "GeeksForGeeks",
                "TECHNICAL CONTENT WRITER",
                "• Published 4 articles for the topics such as Data Structures and Algorithms and Python",
                "Pune, Maharashtra, India",
                "July 2017 - September 2017",
                "Softtestlab Technologies",
                "WEB DEVELOPER INTERN",
                "• Was responsible for creating an internal project for the company using PHP and Laravel for testing purposes",
                "• Worked on a live project for creating closure reports using PHP and Excel"
            ],
            "mobile_number": "8087996634",
            "name": "Omkar Pathak",
            "no_of_pages": 3,
            "skills": [
                "Python",
                "Cloud",
                "Github",
                "Django",
                "Writing",
                "Unix",
                "Algorithms",
                "C",
                "Windows",
                "Training",
                "C++",
                "Flask",
                "Scrum",
                "Testing",
                "Reports",
                "Programming",
                "Operating systems",
                "Automation",
                "Engineering",
                "Html",
                "Css",
                "Analytics",
                "Opencv",
                "Content",
                "Excel",
                "Mysql",
                "Migration",
                "Api",
                "Parser",
                "Machine learning",
                "System",
                "Php",
                "Apis",
                "Auditing",
                "Technical",
                "Photography",
                "Shell",
                "Linux",
                "Security",
                "Website",
                "Javascript"
            ],
            "total_experience": 4.5
        }
    ]
}

Mina · Accepted Answer · 2022-07-14 15:04:07Z

3

First of all, you set the initial value of the data state to an array, but use it as an object. ( data.members )

If the data come from API is an object not an array, You need to set it as an object.

const [data, setData] = useState({})

Then you can check if the object has been set or not, you can check by the length of the object keys

  return (
<div>
...
  <div>
  {Object.values(data).length ? (
    <p>Loading...</p>
  ) : (
    data.members.map((member, i) => (
      <p key={i}>{member}</p>
    ))
  )}
</div>
</div>

);

answered Jul 14, 2022 at 15:04

Mina

17.8k3 gold badges24 silver badges39 bronze badges

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

Comments

emrich · Accepted Answer · 2022-07-14 22:36:56Z

0

I would edit the code like:

const [data, setData] = useState([])


    useEffect(() =>{
      fetch("/details").then(
        res => res.json()
      ).then(
        data => {
          setData(data.Information)
          console.log(data.Information)
        }
      )
    }, [])

(
    <div>
    ...
      <div>
      {(data.length === 0) ? (
        <p>Loading...</p>
      ) : (
        data.map((member, i) => (
          <p key={i}>{member.college_name}</p>
        ))
      )}
    </div>
    </div>
  );

Its likely, that members is still undefined after setting the state.

edited Jul 14, 2022 at 22:36

answered Jul 14, 2022 at 15:04

emrich

2582 silver badges13 bronze badges

17 Comments

Moudhaffer Bouallegui Over a year ago

I get this error instead, TypeError: Cannot read properties of undefined (reading 'map'). I'll update the question and display the error I get from your edit.

emrich Over a year ago

Perfect, then just remove the object you initially put into the array. Then, your solution should be working.

Moudhaffer Bouallegui Over a year ago

Sorry I'm not so sure I understand what you mean

emrich Over a year ago

const [data, setData] = useState([])

Moudhaffer Bouallegui Over a year ago

Now, the page loads up, I get Loading, then as the data is fetched it gives me the same error

|

Collectives™ on Stack Overflow

Problem with conditional rendering with React

2 Answers 2

Comments

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related