How to show or hide elements in React?

ReactJS is an entire architecture based on components that are used to create awesome UI and developer components. So, in this article, we will see how to show or hide elements in React.

How to show or hide elements in React?

In any React app, it is all about components. So usually, you have to work with new components to develop a rich user interface. Hence, as per different circumstances you have to hide or show some components if we need them somewhere. To implement such functionality of showing and hiding components you should have some id and some key values. By using those values you can modify the visibility of the components in UI using different operators.

Creating React Application:

• Create a React application using the following command:

npx create-react-app foldername

• After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Hide or Show Component in ReactJS:

As we discussed above we have to create few components and render them into a single parent file to execute the conditions so that we can apply the functionality of showing or hiding to some particular components. Let’s create three child components and name them Child1.js, Child2.js, and Child3.js in the src folder and paste the following code into respective files.

• Child1.js:

import React from "react";
const Child1 = () => {
return <div>This is how child component number 1 looks like.</div>;
};
export default Child1;
}

• Child2.js:

import React from "react";

const Child2 = () => {

  return <div>This is how child component number 2 looks like.</div>;

};
export default Child2;

• Child3.js:

import React from "react"; 

const Child3 = () => { 

return <div>This is how child component number 3 looks like.</div>; 

}; 

export default Child3;

Now it’s time to merge all these child JS files into the main parent file where we can set some particular conditions to show or hide some particular components. So let’s create the main file name App.js and paste the following code into it. Now define three different boolean variables into the App.js file.

constructor() {
  super();
  this.state = {
    name: "React",
    shchild1: false,
    shchild2: false,
    shchild3: false
  };
}

Initially, we allocate the default value into all three boolean variables as false, and further, we will use these variables to show to hide any particular component in the App.js file.

import React, { useState } from "react";

import Child1 from "./Child1";

import Child2 from "./Child2";

import Child3 from "./Child3";

const App = () => {

  const [state, setState] = useState({

    name: "React",

    shchild1: false,

    shchild2: false,

    shchild3: false

  });
  const hideComponent = (varname) => {

    setState(prevState => ({

      ...prevState,

      [varname]: !prevState[varname]

    }));

  };
  const { shchild1, shchild2, shchild3 } = state;

  return (

    <div>

      {shchild1 && <Child1 />}

      <hr />

      {shchild2 && <Child2 />}

      <hr />

      {shchild3 && <Child3 />}

      <hr />

      <div>

        <button onClick={() => hideComponent("shchild1")}>

          Click here to hide GFG child1 component

        </button>

        <button onClick={() => hideComponent("shchild2")}>

          Click here to hide GFG child2 component

        </button>

        <button onClick={() => hideComponent("shchild3")}>

          Click here to hide GFG child3 component

        </button>

      </div>

    </div>

  );

};

export default App;

As we have declared three boolean variables in starting and set the default value to be false, and we have also made three child component which is further rendered in the main file as we need to hide or show the components. If we set the boolean value to be true then only that particular component will be rendered otherwise by default it will not render hence will be in a hidden phase. By clicking on different buttons created we can switch the cases to change the values of boolean variables.

When we click the click event button it simply updates the value of variables by sending the string as an input for which case that button has been clicked and based on the value updated in the variables it will decide that whether that component has to be shown or hidden. Using a similar method we can also hide or show elements also in ReactJS.

Conclusion:

So, in this article, we have been through how to show or hide elements in React. Also, feel free to comment with your suggestions and feedback. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced React JS developers.