How to fetch and rerender the component - reactjs

Question

Please tell me how to fetch new data into the array using useState. Each time useEffect is using, the array is initialized empty again. I need to pass this array to the table so that when the values change, the table is rendered again
const AccountContainer = () => {
let [isLoaded, setIsLoaded] = useState(false);
let [page, setPage] = useState(0);
let [accData, setAccData] = useState([]);
useEffect(() => {loadData()}, [page]);
const loadData = async () => {
const response = await fetch(API_URL);
const data = await response.json();
data.content.map(acc => {
setAccData([...accData, acc])
});
setIsLoaded(true);
};
return (
<table data={accData} />
)
};
export default AccountContainer;
added log
[] AccountContainer.js:30
[] AccountContainer.js:30
[] AccountContainer.js:30
[] AccountContainer.js:30
[] AccountContainer.js:30
[] AccountContainer.js:30
https://codesandbox.io/embed/great-rubin-poywh?fontsize=14&hidenavigation=1&theme=dark
Thanks in advance

Answer 1

here is the solution in the sandbox
// AccountList.jsx
import React from "react";
const AccountList = props => (
<div>
{console.warn(props)}
{props.dataAcc.map(acc => (
<div>{acc.email}</div>
))}
)
</div>
);
export default AccountList;
App.jsx
import React, { useState, useEffect } from "react";
import AccountList from "./AccountList";
import "./styles.css";
const AccountContainer = () => {
let [isLoaded, setIsLoaded] = useState(false);
let [page, setPage] = useState(0);
let [accData, setAccData] = useState([]);
const API_URL = `https://reqres.in/api/users?page=1`;
useEffect(() => {
loadData();
}, [page]);
const loadData = async () => {
const response = await fetch(API_URL);
const data = await response.json();
setAccData([...accData, ...data.data]);
setIsLoaded(true);
};
const renderTable = () => {
if (isLoaded) {
return (
<div>
{console.warn(accData)}
<AccountList dataAcc={accData} />
</div>
);
} else if (!isLoaded) return "Loading";
};
return renderTable();
};
export default AccountContainer;