Rendering specific Content from json

Question

So, Hello My problem is this. I have a C-class Component that is 'maping content' that is located in data.json I will add more content later but, in C class I have a button that is currently pushing me to the Payment page, I want when the button is pressed, that it renders the content(image, price, class) only that content from json into the Payment page where I can style it once again that would be basically it. Thanks in Advance

data.json

[
  {
    "id":0,
    "class":"A-Class",
    "Info": "A is the cheapest one ",
    "imgA":"./ModImages/Aclass.jpg",
    "textA":"fdsd",
    "trefuA":"fdsd",
    "optionA":"fdsd"
  },
  {
    "id":1,
    "imgB":"./ModImages/Bclass.jpg",
    "classB":"B-Class",
    "priceB":"$46,400",
    "textB":"fdsd",
    "trefuB":"fdsd",
    "optionB":"fdsd"   
  },
  {
    "id":2,
    "classC":"C-Class",
    "imgC":"./ModImages/Cclass.jpg",
    "priceC":"$46,400",
    "textC":"fdsd",
    "trefuC":"fdsd",
    "optionc":"fdsd"
  }
]

C Class Component

import React from 'react'
import data from './data.json'
import { useHistory } from 'react-router'
function C() {

  let history = useHistory();

  function handleClick() {
  history.push("/payment");
   }

    return (
        <div  >
         {data.map((postData) =>{
         console.log(postData)
         return(
        <div key= 
         {postData.id}>
        <div className='absolute '> 
           <button onClick={handleClick}className=' absolute text-black-600 h-10  ml-24 mt-32 bg-white w- 
            36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>Buy Now</button>
           <img className='w-screen object-contain'src={postData.imgC}></img>         
           <h1 className='absolute ml-24 md:text-5xl sm:text-5xl  top-8'>{postData.classC}</h1>
           <h1 className='text-base font-mono absolute ml-24 top-24'>{postData.priceC}</h1>   
        </div>
        </div>
            )
        })
        }
    </div>
    )
}

export default C

App Component

import React,{useState, useEffect} from 'react'
import './assets/main.css'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Header from './Header'
import Home from './Home'
import A from './Models/A'
import B from './Models/B'
import C from './Models/C'
import Payment from './Payment';


function App() {
 
  return (
    <div  >      
    <div >
       <Router>
         <Header />      
           <Switch>
            <Route path="/payment">
              <Payment/>
            </Route>

            <Route path="/C">
              <C/>
            </Route>

            <Route path="/B">
              <B />
            </Route>

            <Route path="/A">
            <A />
            </Route>

           <Route path="/">
            <Home />
           </Route>
          </Switch>
       </Router>

     </div>
    </div> 
  );
}


export default App;

Home Component

import React from 'react'
import {
    BrowserRouter as Router,
    NavLink
  } from "react-router-dom";

  function Home() {
    return (
        <div className='ml-20'>
         <nav className='bg-red-50 max-w-full'>
          <ul >
            <li>
              <Link to="/A">A-Class</Link>
            </li>
            <li>
              <Link to="/B">B-Class</Link>
            </li>
            <li>
              <Link to="/C">C-Class</Link>
            </li>
           </ul>
        </nav>

       
        </div>
    )
}

export default Home

Answer 1

You can pass additional data with history.push and get it from props in Payment page.

In your C component:

import React from 'react'
import data from './data.json'
import { useHistory } from 'react-router'
function C() {

  let history = useHistory();

  function handleClick(postData) {
    // Pass additional data to Payment component when changing route.
    history.push({
      pathname: '/payment',
      state: {
        price: postData.price,
        image: postData.image,
        class: postData.class
      }
    });
  }

  return (
    <div  >
      {data.map((postData) => {
        console.log(postData)
        return (
          <div key=
            {postData.id}>
            <div className='absolute '>
              {/** pass postData to handleClick function */}
              <button onClick={() => handleClick(postData)} className=' absolute text-black-600 h-10  ml-24 mt-32 bg-white w- 
            36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>Buy Now</button>
              <img className='w-screen object-contain' src={postData.imgC}></img>
              <h1 className='absolute ml-24 md:text-5xl sm:text-5xl  top-8'>{postData.classC}</h1>
              <h1 className='text-base font-mono absolute ml-24 top-24'>{postData.priceC}</h1>
            </div>
          </div>
        )
      })
      }
    </div>
  )
}

export default C

Inside your Payment component you can pull the price, image and class out this way:

import React from 'react';
import { useLocation } from "react-router-dom";

const Payment = () => {
  // ... 
  const location = useLocation();

  console.log(location.state.image) // image url from C
  console.log(location.state.class) // class from C
  console.log(location.state.price) // price from C

  // ... 
}

export default Payment;

Answer 2

You should probably change your route to one with a parameter

<Route path="/payment/:dataId" component={Payment}></Route>

and convert the button to a Link which also passes the id

<Link
  to={`/payment/${postData.id}`}

and in the Payment component

• also include access to the data.json
• get the url parameter from the props
• use the provided parameter to find the relevant item in the data

Something like this: https://codesandbox.io/s/festive-spence-bw18s?file=/src/App.js