¿Cómo mostrar u ocultar elementos en React?

ReactJS es una arquitectura completa basada en componentes que se utilizan para crear increíbles componentes de interfaz de usuario y de desarrollo. En cualquier aplicación React, se trata de componentes, por lo que, por lo general, tenemos que trabajar con nuevos componentes para desarrollar una interfaz de usuario rica. Por lo tanto, según las diferentes circunstancias, tenemos que ocultar o mostrar algunos componentes si los necesitamos en alguna parte.

Para implementar dicha funcionalidad de mostrar y ocultar componentes, debemos tener alguna identificación, algunos valores clave, al usar esos valores podemos modificar la visibilidad de los componentes en nuestra interfaz de usuario usando diferentes operadores que funcionan en ciertas condiciones.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Ocultar o mostrar componente en ReactJS Como discutimos anteriormente, tenemos que crear algunos componentes y convertirlos en un solo archivo principal para ejecutar las condiciones para que podamos aplicar la funcionalidad de mostrar u ocultar a algunos componentes en particular. Vamos a crear tres componentes secundarios y nombrarlos Child1.js , Child2.js y Child3.js en la carpeta src y pegar el siguiente código en los archivos respectivos.

• Niño1.js:

  JavaScript

  import React, { Component } from "react";    class Child1 extends Component {   constructor() {     super();     this.state = {       name: "React"     };   }      render() {     return <div>This is how GFG child component                  number 1 looks like.</div>;   } }    export default Child1;

• Niño2.js:

  JavaScript

  import React, { Component } from "react";    class Child2 extends Component {   constructor() {     super();     this.state = {       name: "React"     };   }      render() {     return <div>This is how GFG child component                  number 2 looks like.</div>;   } }    export default Child2;

• Niño3.js:

  JavaScript

  import React, { Component } from "react";    class Child3 extends Component {   constructor() {     super();     this.state = {       name: "React"     };   }      render() {     return <div>This is how GFG child component                  number 3 looks like.</div>;   } }    export default Child3;

Ahora es el momento de fusionar todos estos archivos JS secundarios en el archivo principal principal donde podemos establecer algunas condiciones particulares para mostrar u ocultar algunos componentes particulares. Entonces, creemos el nombre del archivo principal App.js y peguemos el siguiente código en él.

Ahora defina tres variables booleanas diferentes en el archivo App.js.

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

Inicialmente, asignamos el valor predeterminado en las tres variables booleanas como falso y, además, usaremos estas variables para mostrar y ocultar cualquier componente en particular en el archivo App.js.

• Aplicación.js:

  JavaScript

  import React, { Component } from "react"; import { render } from "react-dom"; import Child1 from "./Child1"; import Child2 from "./Child2"; import Child3 from "./Child3";    class App extends Component {   constructor() {     super();     this.state = {       name: "React",       shchild1: false,       shchild2: false,       shchild3: false     };     this.hideComponent = this.hideComponent.bind(this);   }      hideComponent(varname) {     console.log(varname);     switch (varname) {       case "shchild1":         this.setState({ shchild1: !this.state.shchild1 });         break;       case "shchild2":         this.setState({ shchild2: !this.state.shchild2 });         break;       case "shchild3":         this.setState({ shchild3: !this.state.shchild3 });         break;       default: return;     }   }      render() {     const { shchild1, shchild2, shchild3 } = this.state;     return (       <div>         {shchild1 && <Child1 />}         <hr />         {shchild2 && <Child2 />}         <hr />         {shchild3 && <Child3 />}         <hr />         <div>           <button onClick={() => this.hideComponent("shchild1")}>             Click here to hide GFG child1 component           </button>           <button onClick={() => this.hideComponent("shchild2")}>             Click here to hide GFG child2 component           </button>           <button onClick={() => this.hideComponent("shchild3")}>             Click here to hide GFG child3 component           </button>         </div>       </div>     );   } }    export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida:   como hemos declarado tres variables booleanas al inicio y establecido el valor predeterminado como falso, y también hemos creado tres componentes secundarios que se procesan aún más en el archivo principal, ya que necesitamos ocultar o mostrar los componentes. Si establecemos que el valor booleano sea verdadero, solo se representará ese componente en particular; de lo contrario, de forma predeterminada, no se representará, por lo que estará en una fase oculta. Al hacer clic en los diferentes botones creados, podemos cambiar los casos para cambiar los valores de las variables booleanas.

Cuando hacemos clic en el botón de evento de clic , simplemente actualiza el valor de las variables enviando la string como entrada, en cuyo caso se ha hecho clic en ese botón y, según el valor actualizado en las variables, decidirá si ese componente debe mostrarse o oculto. Usando un método similar, también podemos ocultar o mostrar elementos también en ReactJS.

• El siguiente será el resultado si el usuario no hace clic en ningún botón:

  

• El siguiente será el resultado si el usuario hace clic en todos los botones: