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…

By.

min read

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>
  );
}

Leave a Reply

Your email address will not be published. Required fields are marked *