React putting props as variables in javascript template literals

Question

I'm trying to pass a react props into a javascript template literal:

function Yuh(props) { return <a href={`javascript:console.log(${props.i})`}>{props.i} <h2>a</h2></a> } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Yuh i='lmao' />);

But I'm getting this error:
Uncaught ReferenceError: lmao is not defined

I tried to replace i='lmao' with i={5} and that seems to work. How do I make it so that strings also work?

Thanks!

Abbas Bagheri · Accepted Answer · 2023-02-11 02:30:10Z

lamo is string but 5 is number you need wrap lamo with quote or double quotation :

function Yuh(props) { return <a href={`javascript:console.log("${props.i}")`}>{props.i} <h2>a</h2></a> } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Yuh i='lmao' />);

if you dont wrap, browser think lamo is a variable , not a string : i change here :

href={`javascript:console.log("${props.i}")`}

Collectives™ on Stack Overflow

React putting props as variables in javascript template literals

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related