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

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>

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. ```
It's how it forces spaces between text nodes. Don't worry about it.

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

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>

` 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

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>

Collectives™ on Stack Overflow

Template string in React

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related