Today you’ll learn how to use if statements to implement dynamic features with React.

Using if statement in React

If statement is a common JavaScript feature, and React is written in JavaScript. So you should be able to use if statement in React.

Both types of React components are written in JavaScript. Except functional as well as class components include some parts that look like HTML. This is JSX, a special syntax for building UIs in React.

You need curly braces to embed dynamic expressions inside JSX. Outside of JSX, you are free to use any JavaScript feature you want.

Even with curly braces, you can only insert expressions in JSX, not statements. if/else is a statement, so it can not be used inside JSX. Only outside of it.

Let’s look at an example:

export default function App() {
  const loggedIn = false;
  const returnButton = () => {
    if (loggedIn) {
      return <button>Log Out</button>;
    } else {
      return <button>Log In</button>;
    }
  };
  return (
    <div>
      <h1>Welcome To Website</h1>
      {returnButton()}
    </div>
  );
}

App is a functional component. In its body we define a returnButton function, which uses if/else statement to determine text of a button. If it’s logged in, button says ‘log out’ and vice versa.

Similarly, we could also define the same function in a class component.

Finally, we use curly braces to call this function in JSX and actually render the button.

Conditional if/else statement in JSX

You can embed dynamic JavaScript expressions in JSX. In previous example, we created a function that uses if/else statement, and then called that function in JSX.

But what if you wanted to embed if/else directly in JSX? Unfortunately, you can’t.

However, you can use the AND (&&) operator and a ternary operator to the same effect. You can also embed them in JSX.

Ternary operator to replicate if/else statement in JSX

Ternary operator is probably most useful JavaScript feature in React.

It is incredibly versatile and can effectively replicate if/else statement. You can even define additional conditions, similar to else if conditions.

Best of all, you can embed ternary operator in JSX.

Let’s take a look at how ternary operators can help you replicate if/else in JSX:

function App() {
  const loggedIn = true;
  return (
    <div>
      <h1>Welcome To Website</h1>
      <button> {loggedIn ? "Sign Out" : "Sign In"}</button>
    </div>
  );
}

This is practically the same app as before. But ternary operator allows us to do the same with much less code. In my opinion, syntax is way more readable this way.

Personally, I prefer ternary operators to conditionally render or style elements in React. You can even chain additional conditions.

Normal syntax for a ternary operator looks like this:

condition ? outcome if true : outcome if false

If the initial condition is false, you can replace ‘outcome if false’ with another ternary operator to check for another condition, similar to else if statement in normal JavaScript.

AND logical operator to replicate if/else statement in JSX

Because of the way it works, AND logical operator is perfect if you want to run an expression only if a certain condition is true.

<div>
{ condition && <Component> }
</div>

In this example, AND connects a Boolean and a component we want to render. If the Boolean is true, it renders the component. If Boolean is false, the expression stops there and does not render a component.  

UX