State returning undefined in typescript-CodePudding

I'm trying to change the state of a component with data from an external api. The state is to add a component as a favourite, but returns undefined. I'm already using arrow functions and the .bind() didn't work as well. What am I missing here?

Library Component:

export default function LibraryComponent() {
  const [albums, setAlbums] = useState<any[]>([]);
  const [albumTitle, setAlbumTitle] = useState<any[]>([]);
  const [photoUrl, setPhotoUrl] = useState();
  const [favourite, setFavourite] = useState<any[]>([]);

  //FETCH DATA
  const fetchData = () => {
    const getAlbums = "https://jsonplaceholder.typicode.com/albums?_limit=20";
    const getPhotos =
      "https://627ed423b75a25d3f3bd811f.mockapi.io/api/photos/1"; //random number here
    const albums = axios.get(getAlbums).then((res) => {
      setAlbums(res.data);
    });
    const photoUrl = axios.get(getPhotos).then((res) => {
      setPhotoUrl(res.data.images);
    });

  };
  const addFavourite = (album: []) => {
    const favouriteList = [...favourite, album];
    setFavourite(favouriteList);
  };

  return (
    <>
      <div className="container-fluid w-50">
        <div className="row">
          {albums.map((album) => (
            <div key={album.id} className="col-lg-2 col-sm-6">
              <div className="col-lg-12 col-sm-6">
                <div className="thumbnail img-responsive">
                  <AlbumComponent
                    title={album.title}
                    image={photoUrl}
                    handleFavouriteClick={addFavourite}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

Album Component:

type Meta = {
  title: any;
  image: any;
  handleFavouriteClick: any;
};

export default function AlbumComponent(props: Meta) {
  return (
    <>
      <img src={props.image} alt="" className="img-fluid img-thumbnail" />
      <p>{props.title}</p>
      <div onClick={() => props.handleFavouriteClick()}>
        <i className="fa-regular fa-heart"></i>
      </div>
    </>
  );
}

CodePudding user response：

addFavourite expects an album parameter.

Try something like this:

<AlbumComponent
  title={album.title}
  image={photoUrl}
  handleFavouriteClick={() => addFavourite(album)}
/>

CodePudding user response：

You need to pull the value from the input and provide it as a parameter to the function. You could use a controlled input for this. Somehting like this:

export default function AlbumComponent(props: Meta) {
  const [value, setValue] = React.useState()

  return (
    <>
      <img src={props.image} alt="" className="img-fluid img-thumbnail" />
      <p>{props.title}</p>
      <div onClick={() => props.handleFavouriteClick(value)}>
        <i className="fa-regular fa-heart" value={value} onChange={setValue}></i>
      </div>
    </>
  );
}