Below is my code. I have already ran "musical" through a console log and can confirm it is returning my state data. My goal is because not every object that has "buy-price" has a value to it(some return null as the value), I want to run this conditional where it can give a string that alerts users "this is not for sale" if null, or return the correct price if it does exist in the API.

import React, { useEffect, useState } from "react";
import fishes from "../APIs/animalCrossing";

export default function Music() {
  const [music, setMusic] = useState([]);

  useEffect(() => {
    fishes.getVillagerMusic().then((response) => {
      setMusic(response);
    });
  }, []);

  const buyMusic = () => {
    music.map((musical) => {
      if (musical["buy-price"] == null) {
        return "This Song is not for purchase";
      } else {
        return musical["buy-price"];
      }
    });
  };
  return (
    <div>
      {music.map((music, index) => {
        return (
          <div key={index}>
            <img src={music.image_uri} alt="music" />
            <p> Sold at: ${buyMusic()} </p>
          </div>
        );
      })}
    </div>
  );
}