How to get and display specific data from onClick into another page in React

Question

So I am currently working on a react project and I am trying to figure out how to get specific data from a clicked button/profile and then display that onto another page.

This is what I currently have. Here is a list of profiles of different celebrities currently displayed on a home page. Each one is shown as a profile card that you can click on.

import React from 'react';
import '../styles/Profile.css';
import ProfileItems from '../components/ProfileItems';

function profile() {
return (
<div className='profile'>
  <h1>Choose A Profile</h1>
  <div className='profile__container'>
    <div className='profile__wrapper'>
      <ul className='profile__items'>
        <ProfileItems
          src='images/KimK.jpg'
          text='Kim Kardashian - Skims'
          label='Social Media Influncer'
          path='/'
        />
        <ProfileItems
          src='images/TheRock.jpg'
          text='The Rock - Zoa Energy Drink'
          label='Pressional Wrestler & Actor'
          path='/'
        />
      </ul>
      <ul className='profile__items'>
        <ProfileItems
          src='images/Ronaldo.jpg'
          text='Cristiano Ronaldo - Portugal Team'
          label='Professional Soccer Player'
          path='/'
        />
        <ProfileItems
          src='images/Kylie.jpg'
          text='Kylie Jenner - Kylie Cosmetics'
          label='Social Media Influncer'
          path='/'
        />
        <ProfileItems
          src='images/Elon.jpg'
          text='Elon Musk - Tesla'
          label='CEO'
          path='/'
        />
      </ul>
    </div>
  </div>
</div>
);
}

export default profile;

Now for each of these profiles, when they are clicked on I want them to be specifically routed or set to a path to another page with their respective data. For example, I have this JSON file that contains information about Kylie Jenner and Kim Kardashian. So when I click on Kylie Jenner's profile, I would like for data to be pulled from the JSON file and to ONLY pull Kylie's data and display that data on another page to which I have set as the "Analysis Page".

[ 
{
    "id": 1,
    "title": "Kylie Jenner",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user could have comment filtering turned on",
    "slug": "hello-world",
    "img" : "https://ilarge.lisimg.com/image/16801290/1080full-kylie-jenner.jpg"
},
{
    "id": 2,
    "title": "Kim Kardashian",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user could have comment filtering turned on",
    "slug": "hello-world",
    "img" : ""
}

]

The same would go for another celebrity such as Kim Kardashian. So when I click on Kim's profile, only her data would be pulled from the JSON file. Once that is pulled, I would like that to be displayed on the "Analysis Page" that I have set up below.

import React, { Component } from 'react'



export class Analysis extends Component {
render() {
    return (
        <div>
           
        </div>
    )
}
}

export default Analysis

I believe I have to set up an onClick function, but I am just confused on how/where to set up that onClick function to grab the specific data. And then routing the profile and displaying that onto another page. If someone can please guide me or suggest an easier method, please let me know. Would be greatly appreciated.

score 0 · Accepted Answer · answered Apr 11 '21 at 23:38

You need to use react-router-dom to pass the celebrity name (title in your case) in props. Then, in your Analysis page, with the props you retrieve the associated informations from your database.

Check my demo here : https://stackblitz.com/edit/react-gkpswn?file=src%2FApp.js

ProfileItems.js

// Link to analysis route with title in props
<Link to={`/analysis/${title}`}>

App.js

// Route to analysis page/component with title props
<Route path="/analysis/:title" render={props => <Analysis {...props} />} />

Analysis.js

  // Get the props with useParams (react-router-dom)
  const { title } = useParams();

  // filter data to get informations based on props "title"
  const profile = Data.filter(profile => profile.title === title);

How to get and display specific data from onClick into another page in React

1 Answers1