How to return empty jsx if condition is false using react?

Question

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.

Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Oct 26, 2020 at 11:26
There are two problems in that code, one in Parent (adjacent elements) and one in Child (incorrect use of a JSX expression). The syntax error you describe relates to the Child, but both need fixing. :-) — T.J. Crowder
– T.J. Crowder, Commented Oct 26, 2020 at 11:28

Guruparan Giritharan · Accepted Answer · 2020-10-26 11:26:46Z

3

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

answered Oct 26, 2020 at 11:26

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

T.J. Crowder Over a year ago

This is indeed the reason for the syntax error the OP reports. (The other answers also provide useful info, but this is the one dealing with the syntax error.)

Guruparan Giritharan Over a year ago

As he is already returning null it should work, but the question is a but mis leading

T.J. Crowder Over a year ago

I don't follow you. I was just saying your answer is correct. While the other answers point out a different problem, this is the one that addresses the one the OP asked about.

Guruparan Giritharan Over a year ago

What i meant is the error is mentioned at the end of the question but the title is about returning empty jsx

peter554 · Accepted Answer · 2020-10-26 11:29:28Z

2

The parent component needs a React.Fragment.

https://reactjs.org/docs/fragments.html

function Parent () {
    const iconRef = React.createRef();
    const iconRect = iconRef && iconRef.getBoundingClientRect();
    return( 
        <React.Fragment>
            <button ref={iconRef}/>
            <Child iconRect={iconRect}/>
        </React.Fragment>
    );
}

edited Oct 26, 2020 at 11:29

answered Oct 26, 2020 at 11:26

peter554

1,3881 gold badge12 silver badges25 bronze badges

1 Comment

T.J. Crowder Over a year ago

Or in vaguely modern JSX environments, the shorthand form: <>...</>.

Yousaf · Accepted Answer · 2020-10-26 11:41:01Z

You can just return null to render nothing.

Your code doesn't works because there are couple of problems in your code:

Parent component is returning two adjacent elements which is incorrect. You cannot have two adjacent React components next to each other without a common parent element.

You need to wrap the JSX code returned from the Parent component in a wrapper element.
```
return (
   <div>
     <button ref={iconRef}/>
     <Child iconRect={iconRect}/>
   </div>
);
```
If you don't want to render an extra element, you can use React.Fragment component as a wrapper element.
```
return (
   <>
     <button ref={iconRef}/>
     <Child iconRect={iconRect}/>
   </>
);
```
Curly brackets around the ternary expression, in the Child component, are not needed. You only need the curly brackets to wrap the javascript code written between JSX code.
```
return (
  iconRect ? (
      <div class="wrapper">
          <div class="dialog">
              {/* something */}
          </div>
      </div>
   ) : null
);
```

Collectives™ on Stack Overflow

How to return empty jsx if condition is false using react?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related