Similar a esta pregunta : pero los datos se originan a partir de un fetch() y hay un .then anidado para llegar al objeto de datos data.list_helado, que es una lista de diccionarios.
¿Por qué los datos no se representan en la página?
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;Donde está Helados.js:
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> ); };Actualice su useEffect para que se vea así. No estabas manejando response.json() correctamente. No debería tener ninguna llamada anidada.
useEffect(() => { fetch("/list_initialized") .then((response) => response.json()) .then((data) => { const updatedData = [...data.list_helado]; setHelados(updatedData); }); }, []);