0
271
ViewsHow to inject JavaScript inside JSX attribute's string?
I'm trying to put some default props inside className=" px-6 py-2 bg-black rounded-full text-black "
and when I use this component elsewhere I will be passing background or text color as props.
What's the right syntax for this manipulation?
I was trying to use grave accent ` with classic ${} but it doesn't work out in my react application.
<button className=`btn px-6 py-2 bg-${} rounded-full`>
shop
</button>
·
Juan Pablo Isaza
1 answers
Answer question0
You'd use a JSX expression, which is {expression} (in a JSX context). So you might well use a template literal, within the {}, like this (assuming backgroundColor and textColor contain the props):
return (
<Button className={`px-6 py-2 bg-${backgroundColor} text-${textColor}`}>
...
</Button>
);
It doesn't have to be a template literal, it could be a string concatenation expression:
return (
<Button className={"px-6 py-2 bg-" + backgroundColor + " text-" + textColor}>
...
</Button>
);
Or to keep the JSX from getting to hard to work with, do it prior to the JSX:
const theClass = `px-6 py-2 bg-${backgroundColor} text-${textColor}`;
return (
<Button className={theClass}>
...
</Button>
);
·
Juan Pablo Isaza
Report
Answer question