Passing data to another component on click React.js

Question

I am trying to pass a specific id of the card that I am clicking to another component to show the card it self in another page

import useFetchData from "./useFetchData";
import { Card,Row,Col, Container,CardGroup,Button } from 'react-bootstrap';
import { Link } from "react-router-dom/cjs/react-router-dom.min"
import Lyrics from "./LyricsFinder";


const Tracks = () => {

const {data,Load}=useFetchData();

return ( 
    <Container>
                {Load && <div>Loading...</div>} 
        {!Load && <h2 style={{ textAlign:"center",marginBottom:"25px" }} >Top 5 songs on the Bilboard this weak</h2>}
    <div className="tracks">
        <CardGroup>
        {data.map(info =>(
                    <div key={info.track.track_id}>
           <Card style={{ width: '30rem' }} key={info.track.track_id}>
            <Card.Body>
            <Card.Title>{info.track.track_name}</Card.Title>
            <Card.Text>  {info.track.artist_name} </Card.Text>
            </Card.Body>
            <Card.Footer variant="mx-auto ">
                 <Link to="/lyrics" className="btn btn-primary">Sign up</Link> // here where I want to click
       
            </Card.Footer>
            
            </Card>
        </div>
         ))
        }</CardGroup>
    </div>
    </Container>
     );
     }

  export default Tracks;

I want to pass an id of the card to the component where I am going to when I click on

Would you please tell me how to do that?!

pass the `id` through props , save the `id` in state and update it using `onClick` handler — KcH, Apr 01 '21 at 09:39
refer [this](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router/30115524) — KcH, Apr 01 '21 at 10:28

score 0 · Answer 1 · answered Apr 01 '21 at 09:42

0

You can pass id as parameter,

<Link to={'/lyrics/' + id} className="btn btn-primary">Sign up</Link>

Now to receive on lyrics component, import useParams from react-router-dom

import { useParams } from "react-router-dom";

Now,

const { id } = useParams();

answered Apr 01 '21 at 09:42

Mohiuddin Khan

513
1
5
13

did you set the params on path to routes?? path: "/lyrics/:id" – Mohiuddin Khan Apr 01 '21 at 10:28

Passing data to another component on click React.js

1 Answers1