How can I manage promise and map objects? - reactjs

Question

I am working on a project in which data in my database is something like this:
I'm not getting what wrong am I doing! here is my
FetchList.js
import { useState } from "react";
const FetchList = async()=>{
const[data, setData] = useState()
const response = await fetch('https://__firebase__url__');
if (!response.ok) {
throw new Error("Something went wrong");
}
let responseData = await response.json();
const loadedHospitals = [];
for (const key in responseData){
loadedHospitals.push({
key: responseData[key].key,
Name: responseData[key].Name,
Email: responseData[key].Email,
Contact_no: responseData[key].Contact_no,
img: responseData[key].img,
});
}
setData(loadedHospitals);
const hospitals = data.map(hospital => {
console.log(hospital);
});
return data;
}
export default FetchList;
I want to pass the entire result in an array to ListHospital.js and then map it with Card component.
import Card from "../UI/Card";
import FetchList from "./FetchList";
import { useState, useEffect } from "react";
const ListHospitals = () => {
const [data, setData] = useState();
useEffect(() => {
FetchList().then(data => setData(data));
}, []);
return data.map((item)=><Card>{item}</Card>);
}
export default ListHospitals;
Error:
TypeError: Cannot read properties of undefined (reading 'map')

Answer 1

I think you need to write const [data, setData] = useState(); as const [data, setData] = useState([]); first. as fetch list is an async function so it will take some time to fetch your data hence it is giving you an error. You can only use map on arrays and during the initial render the data variable is undefined.

Answer 2

Fetching query at the higher level like App.js solved my problem.
Like :-
function App() {
const [ data, setData ] = useState([]);
const fetching = async () => {
const response = await fetch("_____url___");
const responseData = await response.json();
let loadedItem = [];
for (const key in responseData) {
loadedItem.push(responseData[key]);
}
console.log(loadedItem);
}
fetching();
return (
<>
<h1>Hey</h1>
</>
);
}
export default App;