React not rendering data from fetch inside useEffect-CodePudding

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>
    );
};

CodePudding user response：

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);
    });
}, []);