How to return empty jsx if condition is false using react?
i want to render nothing if the condition fails using react.
below is my code,
function Parent () {
const iconRef = React.createRef();
const iconRect = iconRef && iconRef.getBoundingClientRect();
return(
<button ref={iconRef}/>
<Child iconRect={iconRect}/>
);
}
function Child({iconRect}: Props) {
return (
{iconRect ? (
<div class="wrapper">
<div class="dialog">
//something
</div>
</div>
) : null}
);
}
But this doesnt work . it gives error Syntax error unexpected token ,
could someone help me with this. thanks.
Answer
Remove the unwanted curly braces and it would work as expected, thats the reason for the error
function Child({iconRect}: Props) {
return (
iconRect ? (
<div class="wrapper">
<div class="dialog">
//something
</div>
</div>
) : null
);
}