Conditional rendering component using Enums in ReactJS

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:

• NodeJS or NPM
• React JS

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.

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;

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;

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;

Steps to Run: The user needs to run beneath the command to the terminal in the current directory to see the output.

 npm start

Output: