title: Is there any way to render value on the basis of clicked item from an array in react using router?
body: <p>My List comp simply renders me the list of a cricketer from a json file on click of a button from Home comp. When I am clicking on the button I am able to see list of cricketer name but unable to obtain detailList comp on clicking list results. Please help me since I am new in React and learning routing.</p>
  
  <p>My Home Comp</p>
  
  <pre><code>     import React from 'react'
       import { Link } from 'react-router-dom'
  
      function Home() {
      return (
      &lt;div&gt;
          &lt;button&gt;Display Not Found&lt;/button&gt;
          &lt;Link to="/List"&gt;&lt;button&gt;Show Cricketer List&lt;/button&gt;&lt;/Link&gt;
           &lt;/div&gt;)}
         export default Home
  </code></pre>
  
  <p>My Cricketer Details Comp</p>
  
  <pre><code>import {Link} from 'react-router-dom'
  import React, { Component } from 'react'
  import CricketerData from './EmployeeList.json'
  
  class CrickterDetails extends Component {
  render() {
      return (
          &lt;Router&gt;
               &lt;div&gt;
               {CricketerData.map((Detail, index) =&gt; {
               return  
                    &lt;div&gt;
                          &lt;p&gt;Employee ID: {Detail.id}&lt;/p&gt;
                          &lt;p&gt;First Name: {Detail.firstname}&lt;/p&gt;
                          &lt;p&gt;Last Name: {Detail.lastname}&lt;/p&gt;
                          &lt;p&gt;Address: {Detail.Postalcode}&lt;/p&gt;
                          &lt;p&gt;City: {Detail.Postalcode}&lt;/p&gt;
                          &lt;p&gt;Country: {Detail.country}&lt;/p&gt;
                    &lt;/div&gt; ) })}
          &lt;/div&gt;
          &lt;/Router&gt; )}}
  
    export default CrickterDetails
  </code></pre>
  
  <p>My List component:</p>
  
  <pre><code>       import React, { Component } from 'react'
         import {Link} from 'react-router-dom'
         import CricketerList from './EmployeeList.json'
         class List extends Component {
  
          render() {
          return (
           &lt;div&gt;
              {CricketerList.map((List, index) =&gt; {
                return &lt;Link to={`/CricketerDetails/${List.id}`}&gt; &lt;h1 
          key="index"&gt;{List.firstname}&lt;/h1&gt;&lt;/Link&gt;)}
            &lt;/div&gt;
      )}}
     export default List
  </code></pre>
  
  <p>My App.js file</p>
  
  <pre><code>    import React from 'react';
      import { BrowserRouter, Route, Switch } from 'react-router-dom'
      import List from './components/List';
      import CricketerDetails from './components/CricketerDetails'
  
      function App() {
       return (
       &lt;BrowserRouter&gt;
        &lt;div className="App"&gt;
        &lt;Home /&gt;
        &lt;Route path="/List" exact component={EmployeeList} /&gt;
        &lt;Route path="/CricketerDetails/:id" exact component={CricketerDetails} /&gt;
  </code></pre>
  
  <p>My JSON file</p>
  
  <pre><code>[{
      "id": 1,
      "firstname": "Virat",
      "lastname": "Kohli",
      "Address": "501-10th Ave.E.Apt.2A",
      "City": "New-Delhi",
      "country": "India"
      rw
    },
    {
      "id": 2,
      "firstname": "David",
      "lastname": "Warner",
      "Address": "502-20th Ave.E.Apt.2A",
      "City": "Brisbane",
      "country": "Aus"
    },
    {
      "id": 3,
      "firstname": "MS",
      "lastname": "Dhoni",
      "Address": "511-20th Ave.E.Apt.2A",
      "City": "Ranchi",
      "country": "India"
    },
    {
      "id": 4,
      "firstname": "Joe",
      "lastname": "Root",
      "Address": "507 -20th Ave.E.Apt.2A",
      "City": "London",
      "country": "Eng"
    },
    {
      "id": 5,
      "firstname": "Steve",
      "lastname": "Smith",
      "Address": "507 - 20th Ave.E.Apt.2A",
      "City": "Seattle,",
      "country": "Aus"
    }
  ]
  </code></pre>