How to send props to a component in onClick event listener in React.JS?

Question

I want to send the image_url as a prop to another component when the card is clicked. Following is my code but neither I receive errors nor something happens !

// Component A whose information I want to send as props.
import React, { useEffect, useState } from "react";
import { apiDataTop, apiDataUpcoming, apiDataDay } from "../../api";
import styles from "./TopAnime.module.css";
import AnimeInfo from "../AnimeInfo/AnimeInfo";

const TopAnime = () => {
  const [animeData, setAnimeData] = useState([]);
  const [animeDataHype, setAnimeDataHype] = useState([]);
  const [animeDataDay, setAnimeDataDay] = useState([]);
  useEffect(() => {
    callApi();
  }, []);

  const callApi = async () => {
    const results = await apiDataTop();
    const hypeResults = await apiDataUpcoming();
    const dayResults = await apiDataDay();
    setAnimeData(results);
    setAnimeDataHype(hypeResults);
    setAnimeDataDay(dayResults);
  };

  console.log(animeDataDay);

  return (
    <div>
      <h1>Recent Release</h1>
      <div className={styles.container}>
        <br />
        {animeDataDay === []
          ? null
          : animeDataDay.map((anime) => {
              return (
                <a
                  href
                  onClick={(event) => {
                    event.preventDefault();
         
                   // window.location.href = `/anime/info/${animeName}`;
                   // Here I send info as props
                  return <AnimeInfo image_url={anime.image_url} />
                  }}
                  className={styles.move}
                >
                  <img src={anime.image_url} alt="anime" />
                                 </a>
              );
            })}
      </div>
// The Component B 

import React from "react";
import styles from "./AnimeInfo.module.css";

const AnimeInfo = (props) => {

  return (
    <div className={styles.container}>
      <img src={props.image_url} alt="anime" />
    </div>
  );
};

export default AnimeInfo;
 

I want to send information from one component to another, when onClick event is triggered ! I don't get any errors. How to achieve this, specifically when onClick event is triggered

Answer 1

1.create a state variable to store img_url for the clicked item

const [imgUrl,setImgUrl] = useState('')

2. modify component A as follows

   <div> <h1>Recent Release</h1> <div className={styles.container}> <br /> {animeDataDay === [] ? null : animeDataDay.map((anime) => { return ( <a onClick={(event) => setImgUrl(anime.image_url)} className={styles.move} > <img src={anime.image_url} alt="anime" /> </a> ); })}</div> <AnimeInfo image_url={imgUrl} /> </div>

you can change </> tags to other text tags and it will work fine