Declaración If en React

Rana Hasnain Khan 18 abril 2022

React React Statement

Presentaremos la instrucción if en React y cómo usarla en las funciones render de React.

Declaración if en React

Cuando construimos una aplicación de React, a menudo es posible que necesitemos mostrar u ocultar algún contenido en función de una determinada condición. La representación condicional en React funciona de la misma manera que las condiciones funcionan en JavaScript.

Primero, crearemos un nuevo archivo llamado UserGreetings.Js; dentro del archivo, vamos a crear un componente de clase. Ahora eliminemos la exportación con nombre.

En JSX, devolveremos Welcome User!. Nuestro archivo UserGreetings.Js se verá como a continuación.

# react
import React, {Component} from 'react';

class UserGreetings extends Component {
    render() {
        return (
            <div>
                Welcome User!
            </div>
        );
    }
}

export default UserGreetings;

Ahora importaremos UserGreetings en el archivo App.js.

# react
import UserGreetings from "./UserGreetings"

Ahora incluiremos el componente UserGreetings.

# react
<UserGreetings />

Entonces, nuestro código en App.js se verá como a continuación.

# react
import "./styles.css";
import UserGreetings from "./UserGreetings"
export default function App() {
  return (
    <div className="App">
      <UserGreetings />
    </div>
  );
}

Producción:

React si declaración UserGreetings visualización del componente

Ahora, regresemos al archivo UserGreetings.js y hagamos cambios agregando un constructor y dentro del constructor llame super y luego defina el estado. Ahora vamos a crear una propiedad de estado llamada LoggedIn e inicializarla en false.

Ahora en el JSX, agreguemos otro mensaje que diga Welcome Guest!. Nuestro código en UserGreetings.js se verá a continuación.

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: false
    };
  }

  render() {
    return (
      <div>
        <div>Welcome User!</div>
        <div>Welcome Guest!</div>
      </div>
    );
  }
}

export default UserGreetings;

Ahora, vamos a crear una declaración if. Si LoggedIn es true, debería mostrar Welcome User! y si LoggedIn es false, debería mostrar Welcome Guest!.

# react
if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    }

y la condición else si LoggedIn es falso.

# react
else{
    return(
    <div>Welcome Guest!</div>
    )
}

Entonces, nuestro archivo UserGreetings.js se verá como a continuación.

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: false
    };
  }

  render() {
    if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    } 
    else{
      return(
      <div>Welcome Guest!</div>
      )
  }
  }
}

export default UserGreetings;

Producción:

React si declaración - si LoggedIn es falso

Entonces, como puede ver en el resultado, funciona bien. Ha devuelto Welcome Guest porque LoggedIn está configurado como false.

Ahora pongámoslo en true.

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: true
    };
  }

  render() {
    if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    } 
    else{
      return(
      <div>Welcome Guest!</div>
      )
  }
  }
}

export default UserGreetings;

Producción:

React si declaración - si LoggedIn es verdadero

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.