¿Cómo hacer una declaración if else anidada en ReactJS JSX?

Solución:

Necesita envolver su título y cuerpo en un contenedor. Eso podría ser un div. Si usa un lista en su lugar, tendrá un elemento menos en el dom.

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? <div key='0'>some title</div>
        : null
      ),
      <div key='1'>body</div>
    ]
}

Aconsejaría no anidar declaraciones ternarias porque es difícil de leer. A veces es más elegante “regresar temprano” que usar un ternario. Además, puedes usar isBool && component si solo quieres la parte verdadera del ternario.

renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return [
    (this.state.someBoolean && <div key='0'>some title</div>),
    <div key='1'>body</div>
  ];
}

render() {
  return <div className="outer-wrapper">{ this.renderContent() }</div>;
}

Advertencia a la sintaxis someBoolean && "stuff": si por error, someBoolean se establece en 0 o NaN, ese número se enviará al DOM. Entonces, si el “booleano” puede ser un número falso, es más seguro de usar (someBoolean ? "stuff" : null).

En lugar de anidar operadores ternarios como se sugiere a menudo o crear una función separada que no se reutilizará en ningún otro lugar, simplemente puede llamar a una expresión en línea:

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>

Puede verificar múltiples condiciones para renderizar componentes en consecuencia, como se muestra a continuación:

  this.state.route === 'projects'
  ? 
  <div> <Navigation onRouteChange={this.onRouteChange}/> Projects</div>
  :
  this.state.route === 'about'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> About</div>
  :
  this.state.route === 'contact'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> Contact</div>
  :
  <p> default </p>

---

---

Utiliza Nuestro Buscador