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

Question

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 ?

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 = () => {
  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 (
    <div>
      {place.map(place => (
        <Places key={place.id} place={place} />
      ))}
    </div>
  );
};
const Places = ({ place }) => {
  return (
    <div>
      City:
      <Link
        to={{
          pathname: `/places/${place.id}`,
          data: { place }
        }}
      >
        {place.placeVisited}
      </Link>
    </div>
  );
};
export default UserPersonal;

compnent 2

import React, {useState, useEffect} from "react";
const PlaceVisited = (props) => {
  `const [places, setPlaces] = useState('')`
  useEffect(()=>{
    setPlaces(props.place.placeVisited)
  },[])
}

return (
  <div>
    <p>placevisited</p>
    <h2>{places}</h2>
  </div>
);

export default PlaceVisited

router

<Router>
  <Route path="/places/:id"   component={PlaceVisited}   />
</Router>

Answer 1

There are two options how to pass data to a component using React Router.

1. You pass through the id and then use props.match.params.id to fetch the data for that id in your second component
2. You pass through the state. As you're not using any API:s or backed in the example this is the recommended approach.

See this blog article of how you can approach this: https://tylermcginnis.com/react-router-pass-props-to-link/