how to send a parameter from a file to another in react

Question

I'm building a pokedex website and I have pokemon cards with some data displayed in them from a JSON file and when you click on one of them you have a modal view that appears with more detailed data. So in the modal view I want only the detailed data of the card I just clicked on it. I have no idea how to do that if anyone can help, thanks.

This is Modal.tsx where I initialize my modal view, this where I want to get the pokemon name from Card.tsx (cf below) to be able to know which card was clicked :

import '../components/Modal.css';
import Data from '../pokemons.json';
import React from 'react';

export const Modal = ({showModal} : {showModal: boolean}) => {
    return (
        <>{showModal ? (
            <div className="modal-back">
                <div className="modal-container">
                    MODAL VIEW
                </div>
            </div>
        ): null}</>
    );
};

This is Card.tsx where I handle the cards and where I call the modal view :

import Data from "../pokemons.json"
import '../components/Card.css'
import {FiThumbsUp} from "react-icons/fi"
import {useState} from 'react';
import {Modal} from './Modal';

function Card() {
    const [showModal, setShowModal] = useState(false);

    return(
        <div className="cards">
            {Data.map(card => {
                return(
                    <div className="card-box" onClick={() => setShowModal(true)}>
                        <img src={card.img} alt="" /> 
                        <div className="text">
                            <div className="first-line">
                                <p className="id">{card.id}</p>
                                <p>{card.name}</p>
                            </div>
                            <div className="type-container">
                                {card.type.map((type, index) => {
                                    return(
                                        <div className="type" key={index}>
                                            <p className={type}>{type}</p>
                                        </div>
                                    );
                                }) }
                            </div>
                        </div>
                        <div className="icon-circle">
                            <FiThumbsUp className="icon" color="#e5e5e5" size="18px"/>
                        </div>
                    </div>
                );
            }) }
            <Modal showModal={showModal}></Modal>
        </div>
    );
}

export default Card;

Answer 1

You can pass selected card data as prop in the modal. You also need to update prop type as it only accepts one parameter.

Your Modal component will look like this:

interface ICard {
  name: string,
  ...
}

interface props { 
  showModal: boolean;
  card: ICard
}

export const Modal: FC<props> = ({showModal, card}) => {
    return (
        <>{showModal ? (
            <div className="modal-back">
                <div className="modal-container">
                    MODAL VIEW
                </div>
                <p>{card.name}</p>
            </div>
        ): null}</>
    );
};

You also need to update Card component to pass props. Make sure you're storing selected card data.

<Modal showModal={showModal} card={card} />