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

Answer 1

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>
 );