access object from Link state in a class component

Question

I have a Link router that takes me from one page to another like so:

  <Link
  to={{
    pathname: `/details/${submission.id}`,
    state: { mySubmission: submission }
  }}>

This link takes me to another page called details. I want to pass in an object I created from the page Link started to my Details page

I am trying to get the information stored in mySubmission but I am successful, any help would be much appreciated

Below is my details page

class Details extends React.Component {
   componentDidMount() {
    const { match: { params } } = this.props;
  
    axios.get(`/details/${params.userId}`)
      .then(({ data: user }) => {
        console.log('user', user);
  
        this.setState({ user });
      });
  }
  //let currentSubmission;
  //var currentSubmission = props.location.state.mySubmission;
  //let var = this.props.location.state;

    render() {
        return (

    <React.Fragment> 
      <Carousel>
        <Carousel.Item>
          <img src={logo}  alt="logo"/>
        </Carousel.Item>
        <Carousel.Item>
          <img src={logo}  alt="logo"/>  
        </Carousel.Item>
        <Carousel.Item>
          <img src={logo}  alt="logo"/>
        </Carousel.Item>
      </Carousel>

        {/*Right now everything is hard coded but should be passed in as props in future */}
      <div className="card-body">
        <h1 className="title-event">{}</h1>
        <br></br>
        <h2 className="title-location">Kiev, Ukraine</h2>
        <br></br>
        <h1>{this.props.location.state}</h1> {/*not working */}

In the end, I want to make show up the fields of the object in the Details page.

Thank you in advance!!!

PS: Here is the Link API where I get the state attribute, saying I am able to pass in an object to Link

Answer 1

I think you need to wrap your component with withRouter in order to properly receive the state.

Then you get the info from props.location.state

Check this sandbox