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.
Ejemplos
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ómo solucionarlo
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.
Código corregido
function Button({ label }) {
return <button>{label}</button>;
}Errores relacionados
¿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