title: How do i pass the properties of an object whose state is set in one component through a link and render them in another component in React
body: <p>I have two components and one route . I would like to pass the properties of the place object so that i can render them in the other component. I have one component which has the places set in state. In that component i map out links for each individual place . When i click on the link I want to be able to access a single page  with information about that place.  For some reason I cant access the object at all though . Any ideas ? </p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import axios from "axios";
  import PlaceVisited from "./PlaceVisited";
  import {
    Link,
    BrowserRouter as Router,
    Route,
    Redirect
  } from "react-router-dom";
  
  const UserPersonal = () =&gt; {
    const [user, setUser] = useState([1]);
    const [place, setPlace] = useState([
      { id: 6, placeVisited: "Kuaa Lumpur", country: "Malaysia", user_id: 1 },
      { id: 7, placeVisited: "Bangkok", country: "Thailand", user_id: 1 }
    ]);
    return (
      &lt;div&gt;
        {place.map(place =&gt; (
          &lt;Places key={place.id} place={place} /&gt;
        ))}
      &lt;/div&gt;
    );
  };
  const Places = ({ place }) =&gt; {
    return (
      &lt;div&gt;
        City:
        &lt;Link
          to={{
            pathname: `/places/${place.id}`,
            data: { place }
          }}
        &gt;
          {place.placeVisited}
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  export default UserPersonal;
  </code></pre>
  
  <p>compnent 2 </p>
  
  <pre><code>import React, {useState, useEffect} from "react";
  const PlaceVisited = (props) =&gt; {
    `const [places, setPlaces] = useState('')`
    useEffect(()=&gt;{
      setPlaces(props.place.placeVisited)
    },[])
  }
  
  return (
    &lt;div&gt;
      &lt;p&gt;placevisited&lt;/p&gt;
      &lt;h2&gt;{places}&lt;/h2&gt;
    &lt;/div&gt;
  );
  
  export default PlaceVisited
  </code></pre>
  
  <p>router</p>
  
  <pre><code>&lt;Router&gt;
    &lt;Route path="/places/:id"   component={PlaceVisited}   /&gt;
  &lt;/Router&gt;
  </code></pre>