Ionic React component not updating/rendering image - html

Question

I am using Ionic React to develop a web app. Since I am new to this I am running into a few issues here and there. One of which I haven't been able to fix.
I have a TeamLogo component that is supposed to display an image after fetching it from my rest api. However the view / image doesn't seem to update properly every time. So in some cases I just get the default logo. If I route/switch to a different page and then back it will render the correct logo. As soon as I reload the page it is back to the default logo. What am I doing wrong? I have tried without a default logo, then it's just blank and nothing shows even in html. So the default logo is just for visualization/debugging.
I have had this issue in the past but I was able to fix it by wrapping the TeamLogo inside a <React.Fragment>. However this time it won't work and I really have no clue why it even worked in the past. Why isn't it rerendering?
My code looks like this:
export const TeamLogo: React.FC<TeamLogoProps> = ({teamId, width}) => {
const [teamData, setTeamData] = useState<any>(null);
console.log('trying data from ' + teamId);
useEffect(() => {
if (!teamData || teamData.id != teamId) {
fetchTeam(teamId, (data) => {
setTeamData(data);
console.log('fetched data from ' + data.name + " " + teamId);
});
} else {
console.log('Had existing data for ' + teamData.name+ " " + teamId)
}
});
if(teamData != null) {
return (
<img className={teamData.name} width={width + "px"} src={"data:image/png;base64," + teamData?.baseLogo}/>
);
} else {
return <img className="NRG Esports" src="data:image/png;base64,defaultBase64..." width="50px"/>
}
};
And I am using it like this:
function getScoreTeamNameEntry(showScore: boolean, team: any) {
return (
<div className={(showScore ? "" : "hidden-keep-size ") + "name-entry"}>
{team.id ? (<Link className="float-right" to={"/team/" + team.id}>
<React.Fragment><TeamLogo width={50} teamId={team.id}/></React.Fragment>
<IonLabel className={"color-contrast"}>{team.name}</IonLabel>
</Link>) : <IonLabel className={"color-contrast"}>{team.name}</IonLabel>}
</div>);
}
Any help is appreciated!
EDIT:
I have played around with it a bit and was able to bypass the issue, but it's still very strange. Here is what I found out:
<div className="participant winner">
{
getPlaceholderEntry(teamData, id)
}
</div>
I am now passing the id instead of the teamData only so the logo can load from the sole team id and does not have to wait for the teamData to load.
Now getPlaceholderEntry just does this:
function getPlaceholderEntry(team: any, teamId: any) {
console.log("Placeholder");
return (
<React.Fragment>
{
getScoreTeamNameEntry(true, team, teamId)
}
</React.Fragment>)
}
However replacing the getPlaceholderEntry call with a direct
<React.Fragment>
{
getScoreTeamNameEntry(true, team, teamId)
}
</React.Fragment>)
for some reason does not render/update it yet again.
Also adding any sort of condition like
<div className="participant winner">
{
teamData && getPlaceholderEntry(teamData, id)
}
</div>
breaks it yet again. Any idea what's going on?

Answer 1

useEffect(() => {
... original code
},[teamData,teamData.id]);
you need to add the dependencies on the useEffect so the component will rerender when the data changes
https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect