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

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