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;
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
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 />;
);
the problem is in the return, try this:
return(
);
this solved my problem