I am filling a datatable to display on my webpage. It only renders when I interact with the sort button. Where should I fill this array for use in a datatable such that it happens before the rendering?
export function MyComponent() {
const columns = [
{
name: 'Player',
selector: row => row.Player,
sortable: true,
},
];
const [teamArray, setTeamArray] = useState([])
const [managerTeamList, setTeamList] = useState([])
const [bootstrapData, setBootstrapData] = useState([])
var managersteam = [];
useEffect(() => {
getBootstrap().then(bootstrap => {
setBootstrapData(bootstrap.elements)
})
getManagersTeam(27356,28).then(data => {
setTeamList(data.picks)
})
for (var i in managerTeamList) {
for (var j in bootstrapData) {
if (managerTeamList[i].element == bootstrapData[j].id) {
managersteam.push({
"Player" : bootstrapData[j].second_name
})
break;
}
}
}
setTeamArray(managersteam)
}, []);
return (
<DataTable columns={columns} data={teamArray}/>
)
}
Please know that the api requests are asynchronous - getBootstrap and getManagersTeam - so they are empty when you try to loop through the data.
You can use async/await or just update the teamArray when the promises are solved.
You can use the below code:
export function MyComponent() {
const columns = [
{
name: "Player",
selector: (row) => row.Player,
sortable: true,
},
];
const [teamArray, setTeamArray] = useState([]);
const fetchData = async () => {
var managersteam = [];
const [bootstrap, data] = await Promise.all([
getBootstrap(),
getManagersTeam(27356, 28)
]);
for (var i in data.picks) {
for (var j in bootstrap.elements) {
if (data.picks[i].element == bootstrap.elements[j].id) {
managersteam.push({
Player: bootstrap.elements[j].second_name,
});
break;
}
}
}
setTeamArray(managersteam);
}
useEffect(() => {
fetchData();
}, []);
return <DataTable columns={columns} data={teamArray} />;
}