React Tips — Conditionals

React is one of the most popular libraries for creating front end apps. It can also be used to create mobile apps with React Native.

In this article, we’ll look at how to display items conditionally in various ways.

Conditionally Displaying Items

There’re a few ways to display items conditionally with React. We can use conditional statements like if and switch statements. If we’re only toggling between 2 items, then we can also use ternary expressions.

To use ternary expressions, we can write the following code to do that:

import React from "react";

export default function App() {
  const [on, setOn] = React.useState(true);
  return (
    <div className="App">
      <button onClick={() => setOn(on => !on)}>toggle</button>
      {on ? <p>on</p> : <p>off</p>}
    </div>
  );
}

In the code above, we have a toggle button, which when clicked, toggles the on state between true and false .

If on is true , we render ‘on’. Otherwise, we render ‘off’. The following is the ternary expression that we used to do that:

{on ? <p>on</p> : <p>off</p>}

This is great because we don’t have to write if statements to do the same thing, which is much longer.

It’s also an expression, which means that we can embed it in our React code without creating a function unlike if or switch statements.

Therefore, this is much better than using conditional statements if we only display one thing or another based on some condition.

We can write this in an even shorter way if we don’t display anything if on is false .

In this case, we can just use the && operator because it evaluates both operands to see if they both are truthy. If the first operand is falsy, then it’ll just return false instead of evaluating the 2nd operand.

For instance, we can use it as follows:

import React from "react";

export default function App() {
  const [on, setOn] = React.useState(true);
  return (
    <div className="App">
      <button onClick={() => setOn(on => !on)}>toggle</button>
      {on && <p>on</p>}
    </div>
  );
}

In the code above, if on is true then it’ll evaluate the 2nd operand, which is <p>on</p> . Otherwise, it’ll just return false .

Therefore, when on is true , then <p>on</p> will be rendered.

If we have anything longer, then we need to write out the full conditional statement. We should do that in its own function or component.

For instance, if we display more things based on more cases than 2, then we need to write them out as we do in the following code:

import React from "react";

const Fruit = ({ val }) => {
  if (val === 0) {
    return <p>apple</p>;
  } else if (val === 1) {
    return <p>orange</p>;
  } else if (val === 2) {
    return <p>grape</p>;
  }
};

export default function App() {
  const [num, setNum] = React.useState(0);
  return (
    <div className="App">
      <button onClick={() => setNum(num => (num + 1) % 3)}>rotate</button>
      <Fruit val={num} />
    </div>
  );
}

In the code above, we have the Fruit component, which is a stateless component that returns the name of a fruit and displays it in a p element, based on the value of the val prop that’s passed in.

Then in our App component, we have the button, which rotates between the numbers by calling setNum to update the number by rotating them between 0, 1 and 2.

Therefore, when we click the rotate button, we get that we’ll see the name of the fruit rotate between ‘apple’, ‘orange’ and ‘grape’.

Likewise, we can do the same with the switch statement as follows:

import React from "react";

const Fruit = ({ val }) => {
  switch (val) {
    case 0: {
      return <p>apple</p>;
    }
    case 1: {
      return <p>orange</p>;
    }
    case 2: {
      return <p>grape</p>;
    }
    default: {
      return undefined;
    }
  }
};

export default function App() {
  const [num, setNum] = React.useState(0);
  return (
    <div className="App">
      <button onClick={() => setNum(num => (num + 1) % 3)}>rotate</button>
      <Fruit val={num} />
    </div>
  );
}

The code above is longer since we should put a default case no matter if it’s used or not just in case when we run into some unexpected value.

Also, we used case blocks instead of case statements so that we can define block-scoped variables with the same name in each block if needed, so it’s good practice to use it any time.

In the end, we get the same result as before.

If we have if and switch statements in our component, then it’s better to put them inside their own component since they’re long.

Conclusion

There’re many ways to display things conditionally in React components. We can use ternary expressions if we have 2 cases. If we want to display one thing conditionally, we can use the && operator.

Otherwise, we should put if and switch statements in their own component if we need them.