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