React: Condicionales

En React, se pueden utilizar declaraciones condicionales de JavaScript para renderizar componentes o elementos de forma dinámica.

A continuación se presentan varios métodos comunes para manejar el renderizado condicional en React:

1. Usar la declaración if

Usa la declaración if en el método render o en el valor de retorno de un componente funcional para decidir el contenido a renderizar.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;

    if (isLoggedIn) {
      content = <h1>Welcome back!</h1>;
    } else {
      content = <h1>Please sign up.</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

2. Usar el operador ternario

En JSX, puedes usar el operador ternario para un renderizado condicional conciso.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

3. Usar el operador AND lógico (&&)

En JSX, puedes usar el operador AND lógico para el renderizado condicional. Si la condición es true, se renderiza el elemento siguiente.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign up.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

4. Usar la declaración switch

Cuando necesites manejar múltiples condiciones, puedes usar la declaración switch en el método render.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const userRole = this.props.userRole;
    let content;

    switch (userRole) {
      case 'admin':
        content = <h1>Welcome, Admin!</h1>;
        break;
      case 'user':
        content = <h1>Welcome, User!</h1>;
        break;
      case 'guest':
        content = <h1>Welcome, Guest!</h1>;
        break;
      default:
        content = <h1>Who are you?</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />);

Resumen

  • ifDeclaración: adecuado para usar enrenderel método o el valor de retorno de un componente funcional para decidir el contenido a renderizar.
  • Operador ternario: adecuado para realizar un renderizado condicional conciso en JSX.
  • AND lógico (&&) operador: adecuado para el renderizado condicional en JSX, cuando la condición estrueverdadera, se renderiza el elemento.
  • switchDeclaración: adecuado para manejar múltiples condiciones y renderizar diferentes contenidos.
Otras extensiones