Nothing was returned from the render. This usually means that there is no return statement. Or, to do nothing, return null

Question

I have a component in React that I import into index.js, but it gives this error:

Nothing was returned from the render. This usually means that there is no return statement. Or, so as not to render anything, 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 the same problem in the render () method. The problem occurs when you return from render () as:

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

i.e. if you start brackets on a new line

Try using:

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

This will solve the error.

Answer 2

, , "()" "{}", .

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

Answer 3

, :

return(
);

Answer 4

: return(). :

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

, return (...

, return.

Answer 5

, , { }:

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

, .. ( ) :

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

Answer 6

, , ..

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

import MyComponent from './components/MyComponent'

.

Answer 7

:

1. , .

:

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

render:

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

return .

2. , :

:

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

:

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

, . .

Answer 8

, .

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

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

Answer 9

, , / , render(), JSX, . , , , , , , , ! . , - .

, , , - , undefined :

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