Mapping An Array In React JS not rendering - reactjs

Question

I have a nested dictionary object called teams which I preprocess into an array of arrays.
Initially, my teams data (the nested array) looks like this:
and then it is processed into a teamCards array which looks like this:
However even once processed, my map function is still not mapping my array into a component like I would like. Does anyone know why not? Here is my react code:
import React, {useEffect} from 'react'
import { Grid } from '#material-ui/core'
import TeamCard from './TeamCard'
import loader from '../images/loader.gif'
export default function Teams({teamsLoading, teams}) {
console.log(teams)
const teamCards = []
function populateTeamCards() {
Object.keys(teams).forEach(function(key) {
Object.keys(teams).forEach(function(key) {
Object.keys(teams[key]).forEach(function(t) {
teamCards.push([t, teams[key][t]])
})
})
})
}
useEffect(() => {
if (teamsLoading == false) {
populateTeamCards()
}
}, [teamsLoading])
return (
teamsLoading ?
<img src={loader} alt="loading..." /> :
<Grid>
{teamCards.map((element, index) => {
return (
<TeamCard
key={index}
teamName={element[0]}
/>
)
})}
</Grid>
)
}

Answer 1

You can try this
import React, { useEffect, useState } from "react";
import { Grid } from "#material-ui/core";
import TeamCard from "./TeamCard";
import loader from "../images/loader.gif";
export default function Teams({ teamsLoading, teams }) {
const [teamCards, setTeamCards] = useState([]);
function populateTeamCards() {
let newArray = [];
Object.keys(teams).forEach(function (key) {
Object.keys(teams[key]).forEach(function (t) {
newArray.push([t, teams[key][t]]);
});
});
setTeamCards(newArray);
}
useEffect(() => {
if (teamsLoading == false) {
populateTeamCards();
}
}, [teamsLoading]);
return teamsLoading ? (
<img src={loader} alt="loading..." />
) : (
<Grid>
{teamCards.map((element, index) => {
return <TeamCard key={index} teamName={element[0]} />;
})}
</Grid>
);
}

Answer 2

You're setting an instance variable's value and this does not trigger a component re-render, which means even after teamCards is updated, the UI still stays the same as when it was empty.
What you need is to use a React state like this:
const [teamCards, setTeamCards] = useState([]);
...
const cards = [];
// ... push to cards ...
setTeamCards(cards);