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;
This question is related to
javascript
reactjs
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 />;
);
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;
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;
the problem is in the return, try this:
return(
);
this solved my problem
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.
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.
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>
)
})
}
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>
)
}
This error can be seen for a number of reasons:
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.
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.
I ran into this problem although mine is slightly different. Posting here to maybe help somebody sometime.
I had
const Layout = ({ children }) => {
<div className="mx-4 my-3">
<Header />
<Menu />
{children}
<Footer />
</div>
};
But it needed to be:
const Layout = ({ children }) => (
<div className="mx-4 my-3">
<Header />
<Menu />
{children}
<Footer />
</div>
);
It's a difference of tabs vs spaces, I guess. I'm not sure why it'd care...
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.
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.
i solved the problem i exlained...for example in the file we render the other component,other component name is same with me method of current component such as:
const Login = () => {
}
render(
<Login/>
)
..for solve this we must change the method name
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>)
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 '()'.
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.
}
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.
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
(
)
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>
)
write parenthesis next to return not in next line.
Incorrect
return
(
statement1
statement2
.......
.......
)
Correct
return(
statement1
statement2
.........
.........
)
Source: Stackoverflow.com