es6 jsx syntax error using "`"

Question

const { module } = this.props;

return(
    <div className="Card">
        <Link to=`/${module}/detail`></Link>
    </div>
 )

What's wrong with above syntax? I got error of JSX value should be either an expression or a quoted JSX text

Please note that what you quoted is not valid JavaScript (even when correct, as in Reagan Cuthbertson's answer). Do also tag such questions with react-jsx in the future. — Amadan
– Amadan, Commented Apr 6, 2017 at 4:23

Reagan Cuthbertson · Accepted Answer · 2017-04-06 04:09:57Z

6

When using javascript in JSX you need to wrap it in curly braces. The template literal you are using within the value of the to attribute on your Link component needs the curly braces.

return (
    <div className="Card">
        <Link to={`/${module}/detail`}></Link>
    </div>
 );

answered Apr 6, 2017 at 4:09

Reagan Cuthbertson

3601 gold badge3 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

es6 jsx syntax error using "`"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related