React wont load images that are imported from an array of objects

Question

The purpose of what i am doing is trying to associate the teams logo corresponding to their odds, because if i wanted the logo from the api it would have cost money.

As we can see from the following code i import all my images and i export it as an array of objects with each having its specific logo

import western_united from "./western-united.png";
import brisbane from "./brisbane.png";
import western_sydney from "./western-sydney.gif";
import newcastle_jets from "./newcastle-jets.gif";
import central_coast from "./central-coast.gif";
import melbourne_city from "./melbourne-city.png";
import wellington from "./wellington.gif";
import perth from "./perth.gif";
import adelaide from "./adelaide.gif";
import mcarthur from "./mcarthur.png";
import melbourne_victory from "./melbourne-victory.gif";
import sydney from "./perth.gif";

const images = [
    {
        name: "Western United FC",
        image: western_united,
    },
    {
        name: "Brisbane Roar",
        image: brisbane,
    },
    {
        name: "Western Sydney Wanderers",
        image: western_sydney,
    },
    {
        name: "Newcastle Jets FC",
        image: newcastle_jets,
    },
    {
        name: "Central Coast Mariners",
        image: central_coast,
    },
    {
        name: "Melbourne City",
        image: melbourne_city,
    },
    {
        name: "Wellington Pheonix FC",
        image: wellington,
    },
    {
        name: "Perth Glory",
        image: perth,
    },
    {
        name: "Adelaide United",
        image: adelaide,
    },
    {
        name: "Macarthur FC",
        image: mcarthur,
    },
    {
        name: "Melbourne Victory FC",
        image: melbourne_victory,
    },
    {
        name: "Sydney FC",
        image: sydney,
    },
];

export default images;

Now this is my logic that imports the images to the compnent figures out which team is associated with each image and feeds it to the "src" for the img html tag

import React, { useEffect } from "react";
import images from "../images/index";

function Games({ games }) {
    let foundHome;
    let foundAway;

    function returnImage() {
        foundHome = images.find((element) => element.name === games.home_team);
        foundHome = foundHome.image;
        console.log(foundHome);

        foundAway = images.find((element) => element.name === games.away_team);
        foundAway = foundAway.image;
        console.log(foundAway);
    }

    useEffect(() => {
        returnImage();
    }, []);

    return (
        <div className="games__container">
            <div className="betting__container">
                <div className="team_a">
                    <figure className="image__container">
                        <img src={foundHome} alt="" className="image" />
                    </figure>
                    <p className="team--name">{games.home_team}</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[0].price}</button>
                </div>
                <div className="draw__container">
                    <p className="draw">Draw</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[2].price}</button>
                </div>
                <div className="team_b">
                    <figure className="image__container">
                        <img src={foundAway} alt="" className="image" />
                    </figure>
                    <p className="team--name">{games.away_team}</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[1].price}</button>
                </div>
            </div>
        </div>
    );
}

export default Games;

When i console log the output it returns a string something like this for each image "/static/media/adelaide.5775692ae1b78491dcca.gif". But it does not render any images and is left blank, what am i doing something wrong here?

Answer 1

The problem is that the callback passed to useEffect runs after React has finished rendering. So, when the img is rendered both foundHome & foundAway variables are undefined and hence the src attribute is set to undefined.

You actually don't need an effect hook here because there's no side effect, you can compute foundHome and foundAway directly during the render.

import React, { useEffect } from "react";
import images from "../images/index";

function Games({ games }) {
  let foundHome = images.find(
    (element) => element.name === games.home_team
  ).image;

  let foundAway = images.find(
    (element) => element.name === games.away_team
  ).image;

  return (
    <div className="games__container">
      <div className="betting__container">
        <div className="team_a">
          <figure className="image__container">
            <img src={foundHome} alt="" className="image" />
          </figure>
          <p className="team--name">{games.home_team}</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[0].price}
          </button>
        </div>
        <div className="draw__container">
          <p className="draw">Draw</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[2].price}
          </button>
        </div>
        <div className="team_b">
          <figure className="image__container">
            <img src={foundAway} alt="" className="image" />
          </figure>
          <p className="team--name">{games.away_team}</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[1].price}
          </button>
        </div>
      </div>
    </div>
  );
}

export default Games;