Renderizado condicional

No es posible poner un if en JSX. En su lugar, tenemos las siguientes opciones:

Con estados. Si el estado o la propiedad existe, lo muestro, si no no hago nada

return (
  <div>
    {truco.reps && (
        <div>{truco.reps}</div>
    )}
  </div>
);

Con estados II. Si el estado o la propiedad existe, lo muestro, si no, hago otra cosa

return (
  <div>
    {truco.reps
      ? <div>{truco.reps}</div>
      : <div>No reps specified</div>
    }
  </div>
);

Ejercicios renderizado condicional

  1. Haremos una aplicación para calcular el coste de un viaje. Para ello desarrollaremos dos componentes que recibirán como props el número de noches y un número que determinará si el componente va a calcular el coste del hotel o el coste del viaje:
    <ComponenteMultiple opcion="1" noches={nochesState}/>
    <ComponenteMultiple opcion="2" noches={nochesState}/>
    • Opción 1 ( Coste Hotel): múltiplica el número de noches por los 40 euros que cuesta cada noche.
    • Opción 2 ( Coste Alquiler):
      • Cada día de alquiler cuesta 40 €.
      • Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
      • Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).
  2. Vamos a juntar los siguientes tres proyectos en uno solo:

    • Calcular grados Fahrenheit
    • Convertir euros en dólares
    • Calcular la superficie de un rectángulo.

    Pintaremos tres veces un único componente en pantalla que mostrará en función de una prop el resultado correcto.

    const calcula = _ => {
      setDatos({
        dato1: dato1Ref.current.value,
        dato2: dato2Ref.current.value
      });
    }
    
    return (
      <div className="App">
        <input type="text" ref={dato1Ref} placeholder="dato1" onChange={() => { calcula() }} />
        <input type="text" ref={dato2Ref} placeholder="dato2" onChange={() => { calcula() }} />
    
        <ComponenteMultiple opcion="1" datos={datosState} />
        <ComponenteMultiple opcion="2" datos={datosState} />
        <ComponenteMultiple opcion="3" datos={datosState} />
      </div>
    );

Renderizado condicional de clases css

Vamos a mostrar un class u otro en función de si se cumple cierta condición.

import React from 'react';

const mergeClasses = (...classes) => classes.filter(className => !!className).join(" ");

const App =_ => {
  const isOption1 = true;
  const isOption2 = false;
  
    return (
      <div className={mergeClasses("clase1 clase2", isOption1 && "clase3", isOption2 && "clase4")}>
      </div>
    )
}

export default App;
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.