Template string in React

Question

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.

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
– ZombieChowder, Commented Nov 30, 2020 at 21:47
Why are you trying to shoehorn this into a template literal in the first place? — str
– str, Commented Nov 30, 2020 at 21:49

Quentin · Accepted Answer · 2020-11-30 21:47:11Z

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>

answered Nov 30, 2020 at 21:47

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DragoJokera Over a year ago

What i do not like is the eslint, is correcting it like this: ``` To go back to your order please click {' '} {linkPage} . You will be redirect to payment page in {' '} {count} {' '} seconds. ```

Quentin Over a year ago

It's how it forces spaces between text nodes. Don't worry about it.

CertainPerformance · Accepted Answer · 2020-11-30 21:55:39Z

1

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>

edited Nov 30, 2020 at 21:55

answered Nov 30, 2020 at 21:46

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

DragoJokera Over a year ago

` Line 85:16: Parsing error: Unexpected token, expected "}" 83 | <Typography className={classes.cancelledOrderTypography}> Order Cancelled</Typography> 84 | <Typography className={classes.paymentLinkTypography}> > 85 | { To go back to your order please click {linkPage} .You will be redirect to payment page in {count} seconds. } | ^ 86 | </Typography> 87 | </Paper>`

Manuel Pamplona · Accepted Answer · 2020-11-30 21:53:49Z

0

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>

answered Nov 30, 2020 at 21:53

Manuel Pamplona

2171 silver badge5 bronze badges

Collectives™ on Stack Overflow

Template string in React

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related