Bruno R

Renderizado condicional

portfolio-next-l5vb64p5k-bandikyu.vercel.app

En React, se pueden crear distintos componentes que encapsulan el comportamiento necesario. Entonces, se puede renderizar solamente alguno de ellos, dependiendo del estado de la aplicacion.

El renderizado condicional en React funciona de la misma forma que las condiciones en JS. Usa operadores de JS como if o el operador condicional, para crear elementos representando el estado actual, y deja que React actualice la interfaz de usuarios para emparejarlos.

Ej:

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

Ahora creamos un componente Greeting que muestra cualquiera de estos componentes si el usuario ha iniciado sesion.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}



ReactDOM.render(
  // Intentar cambiando isLoggedIn={true}:

  <Greeting isLoggedIn={false} />,
  document.getElementById('root')


);
/*Basicamente presenta uno de los dos componentes en base a un valor booleano
analizado por el componente Greeting cuando es renderizado por ReactDOM*/
//que bonito!!!
//probalo aca https://codepen.io/gaearon/pen/edbMaP?editors=0011

Variables de elementos

Se pueden usar variables para almacenar distintos elementos segun el resultado de una condicion

//considerando dos componentes distintos
function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
//puedo usar un componente con estado para cambiar el valor de isLoggedIn 
//y asi traer a la variable {button} que contiene el complemento con el boton que necesito.
class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }
  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }
  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }
  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>


    );
  }
}
ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Curiosidad: If en una linea con operador logico &&

Se puede incluir expresiones JSX envolviendolas en llaves ⇒

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>

      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }


    </div>
  );
}
ReactDOM.render(.....
//Esta expresion muestra el valor despues de &&, supongo que sera porque es considerado
//como verdadero, entonces si el primer valor falso no retorna nada, y si es verdadero si
//curiosamente colocar como primer valor un no booleano, devolvera solo el primer valor, Ej:
render() {
  const count = 0; //no es booleano
  return (
    <div>
      {count && <h1>Messages: {count}</h1>} 
    </div>
			//retorna "0"
  );
}

If-Else en una linea con operador condicional (ternario)

Otro metodo para el renderizado condicional de elementos es el operador condicional de JS

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
		<div>      
			The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    
		</div>);
}//interesante

se puede usar en expresiones mas grandes ⇒

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

Evitar que el componente se renderice

En algun caso puede ser posible necesitar que un componente se oculte a si mismo aunque haya sido renderizado por otro componente. Para esto devolvemos null en lugar del resultado renderizado

function WarningBanner(props) {

  if (!props.warn) {
    return null;
  }


  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }
  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

Glosario de palabras

Buscar conceptos