I would like to show "I read and agree to the privacy policy.privacy policy." text and the 'privacy policy' part of it must be a link.

I tried below but output is "I read and agree to the [object object]."

const privacyLink = <a href="">Privacy Policy</a>;
{`I read and agree to the ${privacyLink}`}

How can I do this using string template?

I would like to show "I read and agree to the privacy policy.privacy policy." text and the 'privacy policy' part of it must be a link.

I tried below but output is "I read and agree to the [object object]."

const privacyLink = <a href="">Privacy Policy</a>;
{`I read and agree to the ${privacyLink}`}

How can I do this using string template?

• javascript
• reactjs
• ecmascript-6
• jsx

Share Improve this question Follow edited Jul 17, 2017 at 6:29 Negin Basiri asked Jul 17, 2017 at 5:55 Negin BasiriNegin Basiri 1,37544 gold badges2626 silver badges4949 bronze badges 4

• 1 You seem to be missing quotes around the privacyLink string. – castletheperson Commented Jul 17, 2017 at 5:59
• …and where are the braces around the template literal ing from? – Bergi Commented Jul 17, 2017 at 5:59
• 2 If this is about react/jsx, it's not ES6. – Bergi Commented Jul 17, 2017 at 6:00
• @4castle can you please write the correct code? – Negin Basiri Commented Jul 17, 2017 at 6:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

privacyLink is missing quotes. The template literal syntax is not correct. Define privacyLink as a string, define a separate template literal including privacyLink.

const privacyLink = "<a href=>Privacy Policy</a>";
const template = `I read and agree to the ${privacyLink}`;

document.body.innerHTML += template;

or simply define privacyLink as a string and use += operator and .innerHTML to set the .innerHTML of an element within document

const privacyLink = "I read and agree to the <a href=>Privacy Policy</a>";

document.body.innerHTML += privacyLink;

Your question is missing the JSX tag, but you're clearly using JSX syntax so I'll answer it based on that interpretation.

When you write JSX, you're actually telling your transpiler to create a function, e.g. if you're using JSX with React, then

<a href="">Privacy Policy</a>

is

React.createElement('a', { href: '' }, 'Privacy Policy');

And the createElement returns on object, which is what's showing in your string template.

You can use string templates for building strings, so anything that you include inside the ${} must be a string, or it will be cast as a string.

You should continue to use JSX syntax for writing anything you want to include another JSX element. This can be a bit tricky, since any element tree needs to have a root element. Generally you're pretty safe to use a <span>, so in this case:

<span>I read and agree to the {privacyLink}</span>