Conditional rendering component using Enums in ReactJS

In some situations, React Js developer needs to render and hide components based on the particular condition. For example, while building a To-do list app, the developer needs to render tasks if any pending task is available otherwise they need to show a message like “There is no pending task available.”

There are several methods to render components conditionally in react Js such as if-else, and ternary operator, etc. If only 2 to 3 components are available to render conditionally, developers can use if-else or switch case method. If there are more than 3 components available to render conditionally, if-else becomes complex. So, developers should use enums to keep code clean.

In this tutorial, we are going to learn that how developers can render components conditionally using enums. To start with enums, users need to create a new react project.

Creating react project:

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

Now, you have created react app successfully. 

Next, users need to create 2 to 3 components in our project. Create a ‘components‘ folder inside the ‘src‘ folder. Also, create the first.js and second.js files inside the components folder.

Project structure: It should look like the below image.

In this file, 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.

Filename: first.js

 
In this file, we will add some basic React code that is different from the first component. So, we can know which component is rendering on the screen. Edit the ‘second.js’ file and add the below code inside it.

Filename: second.js

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

Filename: App.js

In the App.js file, we will create an enum object first. After that, we will add an ‘enum’ function to render components according to state value. At last, we will edit the ‘App‘ component and call the ‘enum‘ function inside the component to render it conditionally. The user needs to add the below code to the ‘App.js‘ file.

Filename: App.js

 
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: