I got the following code:

export default function CancelledPayment() {

  const linkPage = <Link to="/dashboard/payment" className={clsx(classes.paymentLinkTypography, classes.link)}> here </Link>;

  return (
    <Container>
      <Paper >
        <Paper />
        <Typography>
          {` To go back to your order please click ${linkPage}.You will be redirect in ${count} seconds.`}
        </Typography>
      </Paper>
    </Container>
  );
}

Any idea why is it returning linkPage as [object Object]? The counter is correct, everything is working fine just this linkPage is not okay. If I took it out like:

To go back to your order please click {linkPage}. {`You will be redirect in ${count} seconds.`}

it is working fine, also in some other cases, but I would like everything to be in one line, using template string.

I got the following code:

export default function CancelledPayment() {

  const linkPage = <Link to="/dashboard/payment" className={clsx(classes.paymentLinkTypography, classes.link)}> here </Link>;

  return (
    <Container>
      <Paper >
        <Paper />
        <Typography>
          {` To go back to your order please click ${linkPage}.You will be redirect in ${count} seconds.`}
        </Typography>
      </Paper>
    </Container>
  );
}

Any idea why is it returning linkPage as [object Object]? The counter is correct, everything is working fine just this linkPage is not okay. If I took it out like:

To go back to your order please click {linkPage}. {`You will be redirect in ${count} seconds.`}

it is working fine, also in some other cases, but I would like everything to be in one line, using template string.

• javascript
• reactjs

Share Improve this question Follow asked Nov 30, 2020 at 21:43 DragoJokeraDragoJokera 1,03522 gold badges1818 silver badges2626 bronze badges 2

• Cause you are passing an object :) What does the constant linkPage consist of? I can give you the answer or help you get to it yourself lol. Which one would you like? – ZombieChowder Commented Nov 30, 2020 at 21:47
• Why are you trying to shoehorn this into a template literal in the first place? – str Commented Nov 30, 2020 at 21:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Template strings are a tool to create strings.

JSX is a tool to generate DOM(ish) objects.

When you force an object into a string you get "[object Object]" and not some JSX source code.

Don't use a template string for this. JSX is all you need.

    <Typography>
      To go back to your order please click {linkPage}.
     You will be redirect in {count} seconds.
    </Typography>

Template strings are only for plain string interpolation with JavaScript. They always evaluate to a string. In contrast, using JSX to render React children allows for the interpolation of React elements.

You get [object Object] because

` To go back to your order please click ${linkPage}.

linkPage is a React child, which is a plain object - when coerced to a string, [object Object] is the result. Template literals always evaluate to strings, nothing else - they can't store React children.

So, you need something like:

<Typography>
{
    'To go back to your order please click'
    {linkPage}
    '. You will be redirected in'
    {count}
    'seconds.'
}
</Typography>

javascript is calling toString for any variable you're passing in the template string. And for any object calling toString will return [object Object] as value.

In your case what you want is something like:

<Typography>
  {'To go back to your order please click'}
  {linkPage}
  {`linkPage.You will be redirect in ${count} seconds.`}
</Typography>