1

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.

daniel aagentah
  • 1,672
  • 5
  • 29
  • 56

1 Answers1

5

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>
Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • Ahhh I see, what if I wanted to include characters like ' or " into this? – daniel aagentah Jan 29 '18 at 15:42
  • 2
    To expand on "You are concatenating as a string so it get converted in a string". Ultimately any `React.Component` made using JSX is an Object. When concatenating an Object with a string, the `toString()` method gets called via [type coercion](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript), 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. – peteb Jan 29 '18 at 15:43
  • Just use those characters as in normal HTML! – Mosè Raguzzini Jan 29 '18 at 15:43
  • @MosèRaguzzini don't you think you should give some credit to my comment that you copy/pasted and used as the explanation in your answer? – peteb Jan 31 '18 at 00:11
  • 1
    I've voted up your comment and inserted it in response for the sake of the users, don't you think it is enough for both users and you ? https://meta.stackoverflow.com/questions/304126/is-it-correct-to-answer-copying-from-comments-by-other-users – Mosè Raguzzini Jan 31 '18 at 16:51