Nothing was returned from render. This usually mea

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

the problem is in the return, try this:

return(
);

this solved my problem

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

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 4

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 5

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 6

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.