Passing object from props into React Link

Question

I am trying to pass a property from one component down to another using Link from 'react-router-dom'.

The property I am trying to pass down is {this.props.postContent}.

<Link to={
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent}
}>
    Read More...
</Link>

I first tried using only one curly brace in the Link to={ like how is shown in the correct answer of this SO post, however I get the error:

Parsing error: Unexpected token, expected "}"

I had a look in the documentation and can see that two sets of curly braces are used when adding a pathname, so I tried this instead:

<Link to={{
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent}
}}>
    Read More...
</Link>

But received the following error:

Parsing error: Unexpected keyword 'this'

Can somebody please give me additional advice on adding postContent to a Link please?

** edit to show full component:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Post from "../components/post";

class PostSummary extends Component {
  render() {
    console.log("incoming", this.props.postContent.title);
    return (
      <div key={this.props.postContent.id}>
        <h3 className="postTitle complements">
          {this.props.postContent.title}
        </h3>
        <p className="postText">{this.props.postContent.text}</p>
        <Link to={{
          pathname: "/posts/" + this.props.postContent.id,
          postContent={this.props.postContent}
          }}>
            Read More...
        </Link>
        <p className="postDate">
          - Posted on {this.props.postContent.createdAt}
        </p>
      </div>
    );
  }
}

export default PostSummary;

postContent is not a valid property of the Link `to` prop. The valid properties are listed on the doc page you linked above. — Jon B, Jul 23 '19 at 10:20
@JonB is there a different way that I could pass down a `this.props....` property through a Link? — party-ring, Jul 23 '19 at 10:21
` Read More... ` should work. Link is converted to `a` tag in the end, you can't pass you content there. Check here for the link object representation: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md — Clarity, Jul 23 '19 at 10:25
Maybe consider loading the content for the page based on the page ID rather than trying to pass it via a Link component, this isn't the way you should be doing it. — Jon B, Jul 23 '19 at 10:32
@JonB okay fair, I guess my head is wrapped up in other technologies where this is standard - seems a bit of a waste of processing to pull the data from the id twice rather than pass it through — party-ring, Jul 23 '19 at 10:33
Sorry I mean only pull the data for the page once, so do the data import inside the route rather than in the main container for all routes if that makes sense? — Jon B, Jul 23 '19 at 10:36
@JonB not quite following, if you have any useful links I am all eyes/ears :) — party-ring, Jul 23 '19 at 10:41

score 1 · Accepted Answer · answered Jul 23 '19 at 10:25

1

In your code, the postContent is incorrect:

<Link to={{
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent} // <-- this line
}}>

You have to give the to an object. Just a plain JS object. If you take the value, and (for demo purposes) would assign it to a variable, you might see why its wrong:

const example = {
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent} // <-- this line
}
// It should be:
const example = {
    pathname: "/posts/" + this.props.postContent.id,
    postContent: this.props.postContent,
}

answered Jul 23 '19 at 10:25

Martijn

15,791
4
36
68

Thanks! How would I access the const in the component that I have linked to please? – party-ring Jul 23 '19 at 10:29
As mentioned, it's just a demo. You can apply the same fix in your `Link` component, you dont need to use a const – Martijn Jul 23 '19 at 10:32
@JonB it's coming through when I log `this.props`: _location: hash: "" key: "c7lpyv" pathname: "/posts/1" postContent: createdAt: "10/01/2019" id: "1" text: "At vero eos...." title: "Learning This"_ – party-ring Jul 23 '19 at 10:46
Oh ok sorry my bad that wasn't how I understood the docs. I still think it would be better to get the data inside the route onComponentDidMount rather than pass a huge blob of text down for each link – Jon B Jul 23 '19 at 10:50
@JonB also, the object only appears when you follow the link, it isn't tied to the page which will mean that whilst the answer above is technically correct, it's not the solution needed. – party-ring Jul 23 '19 at 13:15

Passing object from props into React Link

1 Answers1