JavaScript

Qué significa Nothing Was Returned from Render y cómo solucionarlo

Referencia del error

Nothing Was Returned from Render

Lenguaje

JavaScript

Severidad

Alta

Cuándo ocurre

React requiere que cada componente de función devuelva un elemento React, null o undefined.

Posibles soluciones

Agrega la palabra clave return antes de tu JSX. Para componentes de función flecha, usa la forma de paréntesis (=> (...)) o agrega un return explícito dentro de las llaves. Devuelve null en lugar de undefined si el componente no debe renderizar nada condicionalmente.

Errores relacionados

Objects Not Valid as React Child Invalid Hook Call

Más detalles

React requiere que cada componente de función devuelva un elemento React, null o undefined. Este error se lanza cuando la función de renderizado de un componente no devuelve nada (undefined) porque la expresión JSX se escribió sin una sentencia return.

Por qué ocurre

•Falta la palabra clave return antes del JSX en un componente de función.
•Una función flecha usa la sintaxis de cuerpo {} en lugar de () que requiere un return explícito.
•Un renderizado condicional devuelve accidentalmente undefined en alguna ruta de código.
•Una función de componente tiene un return faltante en una rama.

Posibles soluciones

Agrega la palabra clave return antes de tu JSX. Para componentes de función flecha, usa la forma de paréntesis (=> (...)) o agrega un return explícito dentro de las llaves. Devuelve null en lugar de undefined si el componente no debe renderizar nada condicionalmente.

Ejemplos

JavaScript

Código que causa el error

function Button({ label }) {
  // forgot return keyword
  <button>{label}</button>;
}

Error en la terminal

Error: Nothing was returned from render. This usually means a return statement is missing.

Código corregido

function Button({ label }) {
  return <button>{label}</button>;
}

Practica en inglés

¿Cómo le explicarías un Nothing Was Returned from Render a un compañero dev? Elige la frase correcta:

"I hit an error...

¿Listo para practicar tu inglés en el trabajo?

Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.

Prueba Lingua-e gratis