title: Pushing data from one component to a another
body: <p>So I am having a problem with payment Component. Basically I want when I press on the link it pushes (ClassG imageG and PriceG) into the Payment Component where I can style them again I have tried something but it is giving me the straight information(Arayys) when I click on the Link. That is not exactly what I want. I would like some help if possible. Thanks in Advance</p>
  <pre><code>import React from &quot;react&quot;;
  import data from &quot;../data.json&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  function G() {
    return (
      &lt;div className='bg-black '&gt;
  {data.filter(d =&gt;
    d.classG &amp;&amp;
    d.imageG &amp;&amp;
    d.priceG)
    .map((postData) =&gt; {
          return (
            &lt;div className='bg-black'  key={postData.id} &gt;
              &lt;div className='bg-black '&gt;            
                &lt;img
                  alt=&quot;&quot;
                  className=&quot;w-full object-contain &quot;
                  src={postData.imageG}
                &gt;&lt;/img&gt;
                &lt;h1 className=&quot; ml-24 mlg:ml-6 mlg:mt-2 mlg:static text-5xl mlg:text-2xl text-blue-400 
                 absolute top-48&quot;&gt;
                  {postData.classG}
                &lt;/h1&gt;
                &lt;h1 className=&quot;text-lg  mlg:mb-2 mlg:ml-6  mlg:mt-2 mlg:static font-bold text-green-800 
                 font-mono ml-24 top-64  absolute&quot; &gt;
                  {postData.priceG}
                &lt;/h1&gt;
                &lt;Link
                  to={`/payment/${postData.id}`}
                  className=&quot;py-1 px-2  mlg:ml-6 mlg:mt-14 mlg:static text-black-600 h-8  ml-24  top-72 bg- 
                  white w-32 text-center text-gray-red
                  rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600 absolute&quot; 
                &gt;
                  Buy Now
                &lt;/Link&gt;
                &lt;div id='New' className=&quot;flex flex-col mt-40 justify-center border-white text-center items- 
                  center bg-black&quot; &gt;
                &lt;h1 className='tracking-tighter mb-20 text-white text-base md:text-6xl'&gt;What's new in 
                  2021&lt;/h1&gt;  
                &lt;h1 className=' md:p-4 md:w-2/4 font-sans mb-16 text-white '&gt;{postData.newG} &lt;/h1&gt;                  
                &lt;/div&gt;   
                 &lt;/div&gt;
                   &lt;/div&gt;
             )
              }
      export default G
  
  json file
  [
  {
      &quot;id&quot;:1,
      &quot;classG&quot;:&quot;G-Class&quot;,
      &quot;imageG&quot;:&quot;./ModImages/Gclass.jpg&quot;,
      &quot;priceG&quot;:&quot;Starting at $154,900&quot;
      &quot;newE&quot;: &quot;some text&quot;
  
  },
  ]
  
  Payment Component
  import React from &quot;react&quot;;
  import data from &quot;./Models/data.json&quot;;
  function Payment(props) {
    console.log(props);
    const {
      match: {
      params: { dataId }
      }
    } = props;
    const item = data.find(({ id }) =&gt; id === Number(dataId));
    return (
      &lt;div className=&quot;ml-20&quot;&gt;        
        &lt;pre&gt;{JSON.stringify(item, null, 2)}&lt;/pre&gt;
      &lt;/div&gt;
    );
  }
  export default Payment;
  
  App Component
  import React,{useState, useEffect} from 'react'
  import './assets/main.css'
  import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from &quot;react-router-dom&quot;;
  
  function App() {
    return (
      &lt;div className='' &gt;     
        &lt;div&gt;
            &lt;Router&gt;       
               &lt;Header /&gt;     
            &lt;Switch&gt;        
              &lt;Route path=&quot;/a&quot;&gt;
                &lt;A /&gt;
              &lt;/Route&gt;
               &lt;Route path=&quot;/payment/:dataId&quot; component={Payment}&gt;
               &lt;/Route&gt;
             &lt;/Switch&gt;  
             &lt;/Router&gt;
              &lt;/div&gt;
                 &lt;/div&gt;
  
    );
  }
  export default App;
  
  
  </code></pre>