React Tips — Conditionals
Tags: react, webdev, programming, javascript
Published: 2021-01-23 19:53:28

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps.

In this article, we’ll look at some tips for rendering conditional expressions and statements.

### Conditionals IIFEs

Adding conditional expressions in JSX has some tricky parts. If we want to render conditional statements inside JSX code, we can only use expressions. Therefore, we can’t use `if` blocks inside JSX easily.

One good use for immediately-invoked function expressions (IIFEs) is to put conditional statements inside an anonymous function and then call it immediately.

For instance, we can write the following code to do that:

```
import React from "react";

export default function App() {
  const [num, setNum] = React.useState(1);
  return (
    <div className="App">
      <button onClick={() => setNum(Math.ceil(Math.random() * 5))}>Draw</button>
      <p>
        {(() => {
          if (num === 1) {
            return "one";
          } else if (num === 2) {
            return "two";
          } else if (num === 3) {
            return "three";
          } else if (num === 4) {
            return "four";
          } else if (num === 5) {
            return "five";
          }
        })()}
      </p>
    </div>
  );
}
```

In the code above, we have the IIFE with the `if` block:

```
(() => {
 if (num === 1) {
   return "one";
 } else if (num === 2) {
    return "two";
 } else if (num === 3) {
    return "three";
 } else if (num === 4) {
    return "four";
 } else if (num === 5) {
    return "five";
 }
})()
```

It’s an expression so, it can be inside JSX code. We can also substitute the `if...else` with one `switch` in our example.

Also, we can move the function out of the JSX and call it from inside the JSX code as follows:

```
import React from "react";

export default function App() {
  const [num, setNum] = React.useState(1);
  const getResult = () => {
    if (num === 1) {
      return "one";
    } else if (num === 2) {
      return "two";
    } else if (num === 3) {
      return "three";
    } else if (num === 4) {
      return "four";
    } else if (num === 5) {
      return "five";
    }
  };
  return (
    <div className="App">
      <button onClick={() => setNum(Math.ceil(Math.random() * 5))}>Draw</button>
      <p>{getResult()}</p>
    </div>
  );
}
```

The code above is cleaner than putting a big IIFE inside the JSX code.

### && Operator

To conditionally display something inside a piece of JSX code, we can use the `&&` operator as follows:

```
import React from "react";

export default function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div className="App">
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      <p>{show && <span>foo</span>}</p>
    </div>
  );
}
```

In the code above, we have the `show` boolean which controls whether `<span>foo</span>` is shown. It’s shown if `show` is `true` because of short-circuiting evaluation.

If `show` is `true` , then the 2nd operand will be evaluated since the `&&` operator returns `true` if both operands returns `true` .

### Ternary Operator

Another case if we want to display one thing if a condition is `true` and displays something else if the same condition is `false` . We can do that with the ternary operator, which returns one thing if the given condition is `true` and returns something else is the given condition is `false` .

For instance, we can make a toggle that shows ‘foo’ and ‘bar’ when then button is clicked as follows:

```
import React from "react";

export default function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div className="App">
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      <p>{show ? <span>foo</span> : <span>bar</span>}</p>
    </div>
  );
}
```

### Separate Presentational Component

Finally, we can write return statements to conditionally return the JSX code that we want to see as the result. We can move the code that’s inside our IIFE to another component and then we can pass the result that’s generated from clicking the button and then return the things we want to display according to other prop’s value.

For instance, we can write the following code to do that:

```
import React from "react";

const Result = ({ num }) => {
  if (num === 1) {
    return <p>one</p>;
  } else if (num === 2) {
    return <p>two</p>;
  } else if (num === 3) {
    return <p>three</p>;
  } else if (num === 4) {
    return <p>four</p>;
  } else if (num === 5) {
    return <p>five</p>;
  }
};

export default function App() {
  const [num, setNum] = React.useState(1);
  return (
    <div className="App">
      <button onClick={() => setNum(Math.ceil(Math.random() * 5))}>Draw</button>{" "}
      <Result num={num} />
    </div>
  );
}
```

In the code above, we moved our `if...else` blocks to another component. This is cleaner since `Result` is a presentational component that takes the `num` prop and displays what’s there. The `App` component has the main logic.

The code above is an example of clean separation between the container and presentational components. Container components have the logic, and presentational components display what’s given.

### Conclusion

Conditionals can be written in many ways in React components that use JSX. For the simplest conditionals like conditionally displaying a single element or component, we can use the `&&` operator.

If we want to be able to toggle between 2 components and elements depending on a single condition, we can use the ternary operator.

To add `if...else` statements in our code, we can add a function to an existing component to return the result either as an IIFE inside the JSX code, a separate function inside the component or in a separate component that’s only used for presentation.