Advertisements
Was trying out nested ternary render, but the syntax doesn’t seem to be valid?
export default function App() {
const toggle = true;
const toggle2 = true;
return (
<div className="App">
{toggle ? (
<div>true</div>
)
: (
{toggle2 ? (
<div>false, true</div>
): (
<div>false, false</div>
)}
)}
</div>
);
}
Single level works though:
export default function App() {
const toggle = true;
const toggle2 = true;
return (
<div className="App">
{toggle ? (
<div>true</div>
)
: (
<div>false</div>
)}
</div>
);
}
>Solution :
you got lost with all these parenthesis and curly braces. I don’t know who started wrapping every piece of JSX in parenthesis but you don’t need it and to me it’s usually just noise.
export default function App() {
const toggle = true;
const toggle2 = true;
return <div className="App">
{
toggle ? <div>true</div>
: toggle2 ? <div>false, true</div>
: <div>false, false</div>
}
</div>;
}
with some parenthesis:
export default function App() {
const toggle = true;
const toggle2 = true;
return <div className="App">
{toggle ? (
<div>true</div>
) : toggle2 ? (
<div>false, true</div>
) : (
<div>false, false</div>
)}
</div>;
}