How to display data according to condition in ReactJS

Displaying data based on condition means if the desired result doesn’t come, or doesn’t meet the requirement that we are giving, it will show a specific result or outcome based on the result.

In javascript, we can write if, else condition. We can do that in react as well (inside the function). But we can use the same feature inside of the JSX elements as well.

In this article, we will learn how to display data based on conditions in react. Below are the steps that we are going to follow.

Create react project
Showing data based on condition

Create a react project

Run the below commands in the command prompt

npx create-react-app my-app
cd my-app
npm start

This will create a react app and run it on the browser. Please read this article to know more about creating a react project.

Open the app.js file from the src folder which is inside the react project folder

import React, { useState } from "react";

const App = () => {

  return (
    <div >

    </div >
  );
}

export default App

Showing data based on condition

Create a state hook inside the app function

const [siteTitle, setSiteTitle] = useState(false);

here, we have declared a state variable for the site title. By default, it will be false.

Create a heading with JSX expression inside the returning <div>

<h1 className="text-4xl">This heading: { }</h1>

We will write our condition with the ternary operator inside these curly braces (JSX expression). To keep in mind, we can’t write if else conditions here.

{condition ? true : false}

this is the primary usage of the condition inside the JSX expression. The first one will be a condition. And if it returns a true result it will render the data which is after the “?” mark. Else, it will render the data which is after the “:”.

 <h1 className="text-4xl">This heading: {siteTitle ? "Title 1" : "No Title"}</h1>

if the siteTitle returns as true it will render Titla 1, else it will render No Title.

import React, { useState } from "react";

const App = () => {
  const [siteTitle, setSiteTitle] = useState(false);
  return (
    <div >
      <h1 className="text-4xl">This heading: {siteTitle ? "Title 1" : "No Title"}</h1>
    </div >
  );
}

export default App

As we can see, we are getting a false result in siteTitle that’s why it is rendering, No Title.

Create a button and onClick() event handler in it to change setState value to true to check the vice-versa.

import React, { useState } from "react";

const App = () => {
  const [siteTitle, setSiteTitle] = useState(false);
  return (
    <div >
      <h1 className="text-4xl">This heading: {siteTitle ? "Title 1" : "No Title"}</h1>
      <button className="btn">Change title</button>
    </div >
  );
}

export default App

  <button onClick={() => setSiteTitle(!siteTitle)} className="btn">Change title</button>

here, we have created an onClick() handler to change the state of the siteTitle. With each click, it will change its state from false to true and vice-versa.

This is how we can render data based on some given condition as our need in React.