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

In a new page, I want the information from Component A to be sent to Component B, so I can display it separately — Abdullah Ch, Sep 23 '20 at 21:51
I have already created pages for my components ! Just want to send info on onClick event. — Abdullah Ch, Sep 23 '20 at 21:59
Are you using react-router? And if the answer is yes can you copy your routes file? — Nacho Zullo, Sep 23 '20 at 22:05
I'm guessing you're not using [react-router](https://github.com/ReactTraining/react-router)? I suggest you do. — , Sep 23 '20 at 22:05
I am using react-router-dom. I have created my routes. I have two components on two different files. I want to send information as props from one component in one file to another component in another file such that I can show the sent info in a whole new page — Abdullah Ch, Sep 23 '20 at 22:12
So you could use `` with the `state` property. https://stackoverflow.com/a/45263164/14311453 — , Sep 23 '20 at 22:43

score 0 · Answer 1 · answered Sep 23 '20 at 23:17

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

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

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

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

1 Answers1