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