React not rendering data from fetch inside useEffect

Question

Similar to this question: but the data originates from a fetch() and there is a nested .then to get to the data object data.list_helado which is a list of dictionaries.

Why won't the data render on the page?

import React, { useEffect, useState } from "react";
import {Helados} from "../components/Helados";

function BiteroInfoPage() {

  // Initate array of helados (a data object of type dict) and their states
  const [helados, setHelados] = useState([]);

  // Fetch the list of helados initialized from database
  useEffect(() => {
  fetch("/list_initialized")
    .then((response) => response.json())
    .then((data) => {
      const updatedData = [...data.list_helado];
      setHelados(updatedData);
    });
}, []);

  return (
    <div className="biteroInfo">
      <h1>Bitero Segments</h1>
      <Helados prop={helados}/>
    </div>
  );
};

export default BiteroInfoPage;

Where Helados.js is:

import React from 'react';
import { List, Header} from "semantic-ui-react"

export const Helados = ({prop}) => {
console.log(prop)
console.log("Above returns: (4) [{…}, {…}, {…}, {…}]")
    return (
        <List>
            {prop.map((helado, index) => {
                return (
                    <List.Item key={index}>
                        <Header>{helado.study_name}</Header>
                    </List.Item>
                );
            })}
        </List>
    );
};

I think so? When I put a console.log(updatedData) below const updatedData I get console output as: (4) [{…}, {…}, {…}, {…}] — thunt
– thunt, Commented Sep 21, 2021 at 16:43

Dan Zuzevich · Accepted Answer · 2021-09-21 16:29:58Z

1

Update your useEffect to look like this. You weren't handling response.json() correctly. You shouldn't have any nested calls.

useEffect(() => {
  fetch("/list_initialized")
    .then((response) => response.json())
    .then((data) => {
      const updatedData = [...data.list_helado];
      setHelados(updatedData);
    });
}, []);

answered Sep 21, 2021 at 16:29

Dan Zuzevich

3,8394 gold badges32 silver badges43 bronze badges

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

8 Comments

thunt Over a year ago

@k450 thanks for this. Unfortunately, this created an infinite loop of calls in the console showing the data: (4) [{…}, {…}, {…}, {…}], but still nothing actually rendering on screen.

Dan Zuzevich Over a year ago

Yeah, you don't want helados in the useEffect dependency array.

Dan Zuzevich Over a year ago

Can you console.log prop inside of Helados component, and post in your question what it contains?

thunt Over a year ago

I feel so silly... at some point I changed study_name to studyName. I will accept this answer as the correct solution, because the incorrect response.json() handling also contributed. Thank you!

Dan Zuzevich Over a year ago

No prob. Glad you figured it out.

|

Collectives™ on Stack Overflow

React not rendering data from fetch inside useEffect

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related