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