How to refactor && () when returning component

Question

I've recently came into a project where the developers are using this unfamiliar syntax where they did something like this:

    {this.props.something === 'Foo' && (
      <React.Fragment>
       Here
      </React.Fragment>
    )}

How else could I rewrite this?

Possible duplicate of [What is "x && foo()"?](https://stackoverflow.com/questions/6970346/what-is-x-foo) — VLAZ, May 16 '19 at 16:59
[Conditional Rendering – React](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator) — Andreas, May 16 '19 at 17:00
it's a [logical AND `&&`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND_()) and it take the second operand if the forst operand is truthy, otherwise the first one. — Nina Scholz, May 16 '19 at 17:00
Also relevant https://stackoverflow.com/questions/12664230/is-boolean-expression-statement-the-same-as-ifboolean-expression-stat https://stackoverflow.com/questions/6829736/what-a-strange-syntax - `&&` is going to return the result of the right-hand expression if the left-hand one is truthy otherwise it returns the left-hand result. — VLAZ, May 16 '19 at 17:01

score 4 · Answer 1 · answered May 16 '19 at 17:04

Due to short circuiting in JavaScript, the whole code basically either evaluates to false if the condition

 this.props.something === 'Foo'

is not fullfilled, otherwise (if the condition gets fullfilled) it'll evaluate to the following React Component instance. As React will filter out falsy values (including the false) during rendering, this will render the Fragment if something is foo, otherwise it doesn't render anything.

score 2 · Accepted Answer · answered May 16 '19 at 17:16

@Jonas Wilms' answer covers what the syntax means very nicely. However, since you asked specifically about how this could be rewritten, here are some alternative solutions that you might find preferable in certain circumstances.

Supposing you start off with a component like this:

class MyComp extends Component {
  render() {
    return (
      <div>
        {this.props.something === 'Foo' && (
          <React.Fragment>
            Here
          </React.Fragment>
        )}
      </div>
    );
  }
}

You can convert it to this:

class MyComp extends Component {
  render() {
    let content;
    if (this.props.something === 'Foo') {
      content = (
        <React.Fragment>
          Here
        </React.Fragment>
      );
    }

    return (
      <div>{content}</div>
    );
  }
}

or this:

class MyComp extends Component {
  conditionalContent(something) {
    if (something === 'Foo') {
      return (
        <React.Fragment>
          Here
        </React.Fragment>
      );
    }
  }

  render() {
    return (
      <div>
        {this.conditionalContent(this.props.something)}
      </div>
    );
  }
}

or even this:

const ConditionalComponent = ({ show }) => {
  if (show) {
    return (
      <React.Fragment>
        Here
      </React.Fragment>
    );
  }
}

class MyComp extends Component {
  render() {
    let content;
    if (this.props.something === 'Foo') {
      content = (
        <React.Fragment>
          Here
        </React.Fragment>
      );
    }

    return (
      <div>
        <ConditionalComponent show={this.props.something === 'Foo'}/>
      </div>
    );
  }
}

Of course, there are many other variations you could come up with. This hopefully is enough to get you to think more about how to structure your component for optimum readability.

There are some "dark corners" in the React codebases I maintain, where I've written `cond1 && || cond2 && || ...`, sometimes even nested. I hope no one will ever find them (this answer just reminded me that I might should refactor those parts, nice followup :)) — Jonas Wilms, May 16 '19 at 17:25

How to refactor && () when returning component

2 Answers2