Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Question

I have a component in React which I am importing in index.js, but it is giving this error:

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

index.js:

import React from 'react';
import ReactDOM from 'react-dom'; 
import  Search_Bar from './components/search_bar';

const   API_KEY = 'AIzaSyCnpDObOLiiqN87YKJKZ-cxzdAsvYD1F-U';

const App = () => {
    return
    (
        <div>
            <Search_Bar />
         </div>
    );
}

ReactDOM.render(<App />, document.querySelector('#root'));

component:

import React from 'react';

const Search_Bar = () =>
{
    return <input />;
};

export default Search_Bar;

Answer 1

I had same problem in the render() method. The problem comes when you return from render() as :

render() {
    return 
    (
        <div>Here comes JSX !</div>
    );
}

i.e. if you start the parenthesis in a new line

Try using:

render() {
    return (
        <div>Here comes JSX !</div>
    );
}

This will solve the error

Answer 2

Given that you are using a stateless component as a arrow function the content needs to get in parenthesis "()" instead of brackets "{}" and you have to remove the return function.

const Search_Bar= () => (
    <input />; 
);

Answer 3

the problem is in the return, try this:

return(
);

this solved my problem

Answer 4

This error can be seen for a number of reasons:

1. As mentioned above, starting the parenthesis on a new line.

Error:

render() {
  return  
  (
    <div>I am demo data</div>
  )
}

Correct way to implement render:

render() {
  return (
    <div>I am demo html</div>
  );
}

In the above example, the semicolon at the end of the return statement will not make any difference.

2. It can also be caused due to the wrong brackets used in the routing:

Error:

export default () => {
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
}

Correct way:

export default () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
)

In the error example, we have used curly braces but we have to use round brackets instead. This also gives the same error.

Answer 5

I ran into this error when running Jest tests. One of the components was being mocked in the setup file, so when I attempted to use the actual component in a test, I was getting very unexpected results.

jest.mock("components/MyComponent", () => ({ children }) => children);

Removing this mock (which wasn't actually needed) fixed my issue immediately.

Perhaps this will save you a few hours of research when you know you're returning from your component correctly.

Answer 6

I had the same problem with nothing was returned from render.

It turns out that my code issue with curly braces {}. I wrote my code like this:

import React from 'react';

const Header = () => {
    <nav class="navbar"></nav>
}

export default Header;

It must be within ():

import React from 'react';

const Header = () => (
    <nav class="navbar"></nav>
);

export default Header;

Answer 7

We had a component enclosed in the curly braces i.e. { and }:

const SomeComponent = () => {<div> Some Component Page </div>}

Replacing them with the round brackets i.e. ( and ) fixed the issue:

const SomeComponent = () => (<div> Some Component Page </div>)

Answer 8

I came across this thread in search of an answer to this error.

The odd thing, for me, was that everything worked while running in dev (npm start), but the error would happen when the app was built (npm run build) and then run with serve -s build.

It turns out that if you have comments in the render block, like the below, it will cause the error:

ReactDOM.render(
  <React.StrictMode>
    // this will cause an error!
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

I'm sharing in case someone else comes across this thread with the same issue.

Answer 9

Got the answer: I should not use parentheses after return (). This works:

return  <div> <Search_Bar /> </div>

If you want to write multiline, then return ( ...

Your starting parenthesis should be on the same line as return.

Answer 10

The problem seems to be the parentheses on return. Parentheses should be in line with return statement like this:

return(
)

but not this way:

return
(
)  

Answer 11

In my case this very same error was caused by the way I was importing my custom component from the caller class i.e. I was doing

import {MyComponent} from './components/MyComponent'

instead of

import MyComponent from './components/MyComponent'

using the latter solved the issue.

Answer 12

Another way this issue can pop up on your screen is when you give a condition and insert the return inside of it. If the condition is not satisfied, then there is nothing to return. Hence the error.

export default function Component({ yourCondition }) {

    if(yourCondition === "something") {
        return(
            This will throw this error if this condition is false.
        );
    }
}

All that I did was to insert an outer return with null and it worked fine again.

Answer 13

I got this error message but was a really basic mistake, I had copy/pasted another Component as a template, removed everything from render() then imported it and added it to the parent JSX but hadn't yet renamed the component class. So then the error looked like it was coming from another component which I spent a while trying to debug it before working out it wasn't actually that Component throwing the error! Would have been helpful to have the filename as part of the error message. Hope this helps someone.

Oh a side note note I'm not sure anyone mentioned that returning undefined will throw the error:

render() {
  return this.foo // Where foo is undefined.
}

Answer 14

write parenthesis next to return not in next line.

Incorrect

return
(
statement1
statement2
.......
.......
)

Correct

return(
statement1
statement2
.........
.........
)

Answer 15

I have the same error only on the production build. In development was all right, no warning.

The problem was a comment line

ERROR

return ( // comment
  <div>foo</div>
)

OK

// comment
return (
  <div>foo</div>
)

Answer 16

That might be because you would be using functional component and in that you would be using these '{}' braces instead of '()' Example : const Main = () => ( ... then your code ... ). Basically, you will have to wrap up your code within these brackets '()'.

Answer 17

Had the same error in my functional Component as

function ShopCard(props) {
const { shops = {} } = useContext(ContextProvider);
return(
    shops.map((shop)=>{
    <div></div>     
})
)
}

Instead of

function ShopCard(props) {
  const { shops = {} } = useContext(ContextProvider);
  shops.map((shop)=>{
    return(
   <div></div>

   )            
    })

}

Answer 18

Same error, different situation. I'm posting this here because someone might be in same situation as mine.

I was using context API like below.

export const withDB = Component => props => {
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
}

So basically the error message is giving you the answer.

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

withDB should return a html block. But it wasn't returning anything. Revising my code to below solved my issue.

export const withDB = Component => props => {
  return (
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
  )
}

Answer 19

I was getting the same error and could not figure it out. I have a functional component exported and then imported into my App component. I set up my functional component in arrow function format, and was getting the error. I put a "return" statement inside the curly braquets, "return ()" and put all my JSX inside the parens. Hopefully this is useful to someone and not redundant. It seems stackoverflow will auto format this into a single line, however, in my editor, VSCode, it's over multiple lines. Maybe not a big deal, but want to be concise.

import React from 'react';

const Layout = (props) => {
    return (
        <>
            <div>toolbar, sidedrawer, backdrop</div>
            <main>
                {props.children}
            </main>
        </>
    );
};

export default Layout;