CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-router
daniel aagentah
daniel aagentah

Reputation: 1702

React - Render Link within JSX markdown returning [object Object]

I have a <p> tag in my react app which I would like to render a React Router V4 Link within. Currently, instead of returning the Link it returns [object Object].

Here is my code:

<p className="pt2  pb4">
  {`We are constatly encouraging people to get involved, as clichue as it sounds, Rendah is about community, so wether youre an artist, a designer, a writer, a developer or anything else and want to get involed? ${<Link to={'/Contact'} className="no-underline  link">Please get in touch!</Link>}`}
</p>

I have searched a few questions but non of them seem to replicate or solve the problem I have here. Am I missing something?

Any help / advice is appreciated - thank you in advance.

Upvotes: 1

Views: 2736

Answers (1)

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15851

You are concatenating as a string so it get converted in a string! When concatenating an Object with a string, the toString() method gets called via type coercion, which will always return [object Object]. Its not necessary to wrap text in a string lliteral when using JSX, instead when nested inside a Component, Text and Components can be Siblings.

Try:

<p className="pt2  pb4">
  We are constatly encouraging people to get involved, as clichue as it sounds, Rendah is about community, so wether youre an artist, a designer, a writer, a developer or anything else and want to get involed  <Link to={'/Contact'} className="no-underline  link">Please get in touch!</Link>
</p>

Upvotes: 5

Related Questions