operador ternario en jsx para incluir html con reaccionar

Estoy usando reaccionar y estoy tratando de mostrar este mensaje de error si this.state.message === 'failed'. Pero realmente no estoy seguro de por qué esta operación ternaria no funciona. ¿Qué estoy haciendo mal aquí?

render() {
    ...
    <div className="row">
        return (this.state.message === 'failed') ? ( =>{" "}
        {
            <div className="alert alert-danger" role="alert">
                Something went wrong
            </div>
        }
        )() : false; }
    </div>
}

En este momento solo está mostrando return (this.state.message === 'failed') ? ( => en el html

Actualmente me gusta formatear mis ternarios así en reaccionar:

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

Tiene razón en que los IIFE se pueden usar dentro de una declaración de representación, así como en expresiones ternarias. Usando un normal if .. else declaración es válida, pero la render La declaración de devolución de la función solo puede contener expresiones, por lo que tendría que hacerlas en otro lugar.

La sintaxis para ternario es condition ? if : else. Para estar seguro, siempre puede envolver la declaración ternaria completa entre paréntesis. Los elementos JSX también están entre paréntesis. La flecha gruesa en una función de flecha siempre está precedida por dos paréntesis (para los argumentos), pero de todos modos no necesita ninguna función aquí. Entonces, dado todo eso, hay un par de errores de sintaxis en su código. Aquí hay una solución de trabajo:

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Editar: si esto está dentro de otro marcado, entonces no necesita volver a llamar a renderizar. Solo puede usar llaves para la interpolación.

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}

La respuesta aceptada por @Nathan y otras respuestas similares son correctas. Pero vale la pena señalar que el resultado para ? y el resultado para : cada uno debe ser un solo elemento o estar envuelto en un solo elemento (o el resultado puede ser null | undefined, cualquiera de los cuales califica como un solo elemento). En el siguiente ejemplo, el resultado de ? funcionará pero el resultado para : fallará….

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)

Deberías probar esto:

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}

Dadas las respuestas anteriores, también puede devolver directamente una expresión ternaria de return() en tus render() como esto

return condition? this.function1(): this.function2();

y dentro de function1() y function2() puede devolver sus vistas.

Para usar corchetes de uso ternario interno variable nuevamente

render() {
  return(
    <div className="searchbox">
     {this.state.var ? <div className="warning">{this.state.var}</div> : ''}
    </div>
  )
}

Recuerde que la expresión ternaria debe estar envuelta en un Fragmento o div, si no está envuelta arrojará un error de compilación

return (
        <Fragment>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </Fragment>
);