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

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>
  )
}

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;

write parenthesis next to return not in next line.

incorrect

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

correct

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

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>
)

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 '()'.

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>

   )            
    })

}

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.
}

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.

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.

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
(
)  

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.

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>)

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 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 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.

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.

the problem is in the return, try this:

return(
);

this solved my problem

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 />; 
);