Conditional rendering component using Enums in ReactJS

Last Updated : 30 Nov, 2023

In certain scenarios, a ReactJS developer may have to dynamically display or hide components depending on specific conditions. For instance, when creating a To-Do list application, the developer must render tasks if there are pending items; otherwise, they should display a message such as "No pending tasks available."

Prerequisites:

Steps to Create the React Application And Installing Module:

Step 1: To create a new React project, run the below command to your terminal.

npx create-react-app testapp

Step 2: To move inside the project directory, run the below command to your terminal.

cd testapp

Project Structure:

Rendering Component using enum:

Step 1: In javascript, we can create an object with key-value pairs and use it as an enum. Below, you can see the demo of a javascript object with key-value pair.

Syntax:

const Enumobj = {
      key: value,
};

Example:

const Enumobj = {
      first: <First />,
      second: <Second />
};

Step 2: Now, we will make a javascript function that takes a state as a parameter and return a React component based on the state.

Syntax:

function Enum({state}){
      return {object[state]};
}

Example:

function Enum({ state }) {
      return <div>{Enumobj[state]}</div>;
}

Step 3: Let's embed the 'Enum' function in our 'App' component. While calling the 'Enum' function, we will add state value as props.

Syntax:

 return (
      <div>
            <Enum state="Value"></Enum>
      </div>
);

Example:

 return (
      <div>
               <Enum state="first"></Enum>
            <Enum state="second"></Enum>
      </div>
);

Example: In this example,we will create an enum object first. After that, we will add an 'enum' function to render components according to state value. we will add some basic React code to render on the webpage. The user needs to add the following code to the 'first.js' file.

JavaScript

import React, { Component } from 'react';
import Second from './components/second'
import First from './components/first'

// Creating enum object
const Enumobj = {
    first: <First />,
    second: <Second />
};

// Creating enum function to return
// Particular component according to state value
function Enum({ state }) {
    return <div>{Enumobj[state]}</div>;
}

// Call enum function inside the App component
class App extends Component {
    render() {
        return (
            <div>
                <Enum state="first"></Enum>
                <Enum state="second"></Enum>
            </div>
        );
    }
}

export default App;

JavaScript

import React, { Component } from 'react';

// Some basic code to render first component
class First extends Component {
    render() {
        return (
            <div>
                <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
                <h2>This is a first component</h2>
            </div>
        );
    }
}

export default First;

JavaScript

import React, { Component } from 'react';

// some basic code to render second component
class Second extends Component {
    render() {
        return (
            <div>
                <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
                <h2>This is a second component.</h2>
            </div>
        );
    }
}

export default Second;