How to use IF – Else in JSX React Render Function?

The JSX HTML inside the render() function acts like a Javascript. So it becomes confusing when trying to use actual javascript expressions inside the JSX templates.

Let’s have quick look at how to add If-Else blocks inside the JSX template and what are the best approaches available to do that.

How to use If Else Statement in JSX render() of React JS?

For a demo, let’s take a state variable amitrue as shown below:

import React from "react";
import "./style.css";

export default function App() {

  const [amitrue, setAmitrue] = useState(false);

  return (
    <div>
      <h1>Example Using If Else Statement in React</h1>
      <p>Render JSX based in AmITrue state variable</p>
      <h3>I am True</h3>
      <p>Some stuff if true</p>
      <h3>I am False</h3>
      <p>Some stuff if false</p>
    </div>
  );
}

 

Solution 1: Define JSX in a variable with Ternary Operator

Take a variable handleStuff and define the templates inside the ternary operator ?: as shown below:

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [amitrue, setAmitrue] = useState(false);

  const handleStuff = amitrue ? (
    <>
      <h3>I am True</h3>
      <p>Some stuff if true</p>
    </>
  ) : (
    <>
      <h3>I am False</h3>
      <p>Some stuff if false</p>
    </>
  );

  return (
    <div>
      <h1>Example Using If Else Statement in React</h1>
      <p>Render JSX based in AmITrue state variable</p>

      {handleStuff}

      <button onClick={() => setAmitrue(!amitrue)}>Toggle</button>
    </div>
  );
}

Solution 2: Define JSX in a function with If Else

Now, instead of a variable, we will return the JSX from a function named handleStuff().  That can be used as shown below:

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [amitrue, setAmitrue] = useState(false);

  function handleStuff() {
    if (amitrue) {
      return (
        <>
          <h3>I am True</h3>
          <p>Some stuff if true</p>
        </>
      );
    } else {
      return (
        <>
          <h3>I am False</h3>
          <p>Some stuff if false</p>
        </>
      );
    }
  }

  return (
    <div>
      <h1>Example Using If Else Statement in React</h1>
      <p>Render JSX based in AmITrue state variable</p>

      {handleStuff()}

      <button onClick={() => setAmitrue(!amitrue)}>Toggle</button>
    </div>
  );
}

Solution 3: Directly use an expression in JSX using Ternary Operator

You can directly use the ternary operator in the render function as shown below:

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [amitrue, setAmitrue] = useState(false);

  return (
    <div>
      <h1>Example Using If Else Statement in React</h1>
      <p>Render JSX based in AmITrue state variable</p>

      {amitrue ? (
        <>
          <h3>I am True</h3>
          <p>Some stuff if true</p>
        </>
      ) : (
        <>
          <h3>I am False</h3>
          <p>Some stuff if false</p>
        </>
      )}

      <button onClick={() => setAmitrue(!amitrue)}>Toggle</button>
    </div>
  );
}