Why are my images not loading from Shazam Core API in my React app using React-Redux and React Router?

Question

My images are not pulling from shazam core API

This is my Song Card Component:

import { Link } from "react-router-dom";
import { useDispatch } from "react-redux";
import PlayPause from "./PlayPause";
import { playPause, setActiveSong } from "../redux/features/playerSlice";

const SongCard = (song, i) => {
  const activeSong = "test";

  return (
    <div className="flex flex-col w-[250px] p-4 bg-white/5 bg-opacity-80 backdrop-slur-sm animate-slideup rounded-lg cursor-pointer">
      <div className="relative w-full h-56 group">
        <div
          className={`absolute inset-0 justify-center items-center bg-black bg-opacity-50 group-hover:flex ${
            activeSong?.title === song.title
              ? 'flex bg-black bg-opacity-70'
              : 'hidden'
          }`}
        >
          <PlayPause />
        </div>
        <img alt="song_img" src={song.images?.coverart} />
      </div>
    </div>
  );
};

export default SongCard;

This is my Discover Component that's using the Song Card Component

import { Error, Loader, SongCard } from "../components";
import { genres } from "../assets/constants";
import { useGetTopChartsQuery } from "../redux/services/shazamCore";

const Discover = () => {
  const { data, isFetching, error } = useGetTopChartsQuery();

  const genreTitle = "Pop";

  if (isFetching) return <Loader title="Loading Songs.." />;
  if (error) return <Error />;
  return (
    <div className="flex flex-col">
      <div className="w-full flex justify-between items-center sm:flex-row flex-col mt-4 mb-10">
        <h2 className="font-bold text-3xl text-white text-left">
          Discover {genreTitle}
        </h2>
        <select
          onChange={() => {}}
          value=""
          className="bg-black text-gray-300 p-3 text-sm rounded-lg outline-none sm:mt-0 mt-5 "
        >
          {genres.map((genre) => (
            <option key={genre.value} value={genre.value}>
              {genre.title}
            </option>
          ))}
        </select>
      </div>
      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
        {data.map((song, i) => (
          <SongCard key={song.key} song={song} i={i} />
        ))}
      </div>
    </div>
  );
};

export default Discover;

Answer 1

React components accept a single props object, you have declared Song to accept two arguments and named the props object song. As such you'd need to destructure the passed song and i props from the song props object, e.g. song.song and song.i.

It's probably better to rename the props object from song to the more standard props name. Even better to just destructure the song and i props directly.

Assuming the song.images.coverart prop value is correct this should be all you need to update.

Also, since i, as a prop, doesn't appear to be referenced or used in SongCard I've removed it.

const SongCard = ({ song }) => { // <-- destructure from props object
  const activeSong = "test";

  return (
    <div className="....">
      <div className="relative w-full h-56 group">
        <div
          className={`.... ${
            activeSong?.title === song.title
              ? 'flex bg-black bg-opacity-70'
              : 'hidden'
          }`}
        >
          <PlayPause />
        </div>
        <img alt="song_img" src={song.images?.coverart} />
      </div>
    </div>
  );
};

export default SongCard;