Borislav Hadzhiev
Fri Mar 04 2022·2 min read
Photo by Cerqueira
The "Nothing was returned from render" React error occurs when we forget to
explicitly return a value from a function or class component. To solve the
error, explicitly return JSX from your component, use implicit return with an
arrow function or return null
if you meant to return nothing.
Here is an example of how the error occurs.
// ⛔️ Error: Error: App(...): Nothing was returned // from render. This usually means a return statement is missing. const App = () => { <div>Hello world</div>; // 👈️ forgot to use `return` }; export default App;
We used an arrow function to define a component, but used curly braces instead
of parenthesis, so we returned nothing from the App
component.
undefined
, which causes the error.To solve this, make sure to return the JSX from your component.
const App = () => { return <div>Hello world</div>; }; export default App;
The example above uses a return
statement to explicitly return some JSX from a
function component.
If you meant to return nothing from the component, you should return null
instead.
const App = () => { return null; }; export default App;
If your component performs some logic and does not need to render anything, make
sure to return null
, because implicitly or explicitly returning undefined
causes the error.
If you want to use an implicit return with an arrow function, make sure to use parenthesis instead of curly braces.
const App = () => ( <div> <div>Hello world</div> </div> );
The example above shows how to use an implicit return with an arrow function. Note that we use parenthesis to wrap the JSX code and not curly braces.
You might also get the error if you explicitly use a return
statement, but put
the parenthesis on the next line.
function App() { return ( // 👈️ parenthesis should be on same line with return() <div> <div>Hello world</div> </div> ) } export default App;
To solve this, place the parenthesis on the same line as your return
statement.
function App() { return ( <div> <div>Hello world</div> </div> ); } export default App;
If your starting parenthesis is placed on the next line, the engine considers it
as return;
and then some unrelated code on the next line.
undefined
, which causes the "Nothing was returned from render" error.React components are just functions, so when you don't return a value from a
function, you implicitly return undefined
.
React considers a null
return value okay, but if your function or class
components return undefined
, an error is thrown.