Nothing was returned from render This usually means a return statement is missing Or to render nothing return null

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        gt        return                lt div gt               lt Search Bar   gt            lt  div gt            ReactDOM render  lt App   gt   document querySelector   root       component   import React from  react    const Search Bar        gt        return  lt input   gt       export default Search Bar

User · Answer

That might be because you would be using functional component and in that you would be using these      braces instead of      Example   const Main        gt        then your code        Basically  you will have to wrap up your code within these brackets

User · Answer

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        gt     children      gt  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

User · Answer

I ran into this problem although mine is slightly different  Posting here to maybe help somebody sometime  I had const Layout      children      gt         lt div className  quot mx-4 my-3 quot  gt           lt Header   gt           lt Menu   gt           children           lt Footer   gt       lt  div gt      But it needed to be  const Layout      children      gt         lt div className  quot mx-4 my-3 quot  gt         lt Header   gt         lt Menu   gt         children         lt Footer   gt       lt  div gt      It s a difference of tabs vs spaces  I guess  I m not sure why it d care

User · Answer

write parenthesis next to return not in next line  Incorrect return   statement1 statement2                    Correct return  statement1 statement2

User · Answer

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    lt div gt foo lt  div gt     OK    comment return      lt div gt foo lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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   gt  props   gt         lt DBContext Consumer gt           db   gt   lt Component     props  db  db    gt        lt  DBContext Consumer gt      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   gt  props   gt      return        lt DBContext Consumer gt           db   gt   lt Component     props  db  db    gt        lt  DBContext Consumer gt

User · Answer

Got the answer  I should not use parentheses after  return     This works   return   lt div gt   lt Search Bar   gt   lt  div gt    If you want to write multiline  then return         Your starting parenthesis should be on the same line as return

User · Answer

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     lt React StrictMode gt         this will cause an error       lt Provider store  store  gt         lt AppRouter   gt       lt  Provider gt     lt  React StrictMode gt     document getElementById  root        I m sharing in case someone else comes across this thread with the same issue

User · Answer

the problem is in the return  try this   return       this solved my problem

User · Answer

We had a component enclosed in the curly braces i e    and     const SomeComponent        gt    lt div gt  Some Component Page  lt  div gt     Replacing them with the round brackets i e    and   fixed the issue   const SomeComponent        gt    lt div gt  Some Component Page  lt  div gt

User · Answer

This error can be seen for a number of reasons    As mentioned above  starting the parenthesis on a new line    Error   render       return            lt div gt I am demo data lt  div gt          Correct way to implement render   render       return        lt div gt I am demo html lt  div gt           In the above example  the semicolon at the end of the return statement will not make any difference    It can also be caused due to the wrong brackets used in the routing    Error   export default      gt       lt BrowserRouter gt       lt Switch gt         lt Route exact path     component   DemoComponent     gt       lt  Switch gt     lt  BrowserRouter gt      Correct way   export default      gt       lt BrowserRouter gt       lt Switch gt         lt Route exact path     component   DemoComponent     gt       lt  Switch gt     lt  BrowserRouter gt      In the error example  we have used curly braces but we have to use round brackets instead  This also gives the same error

User · Answer

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

User · Answer

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        gt        render     lt Login  gt       for solve this we must change the method name

User · Answer

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  quot return quot  statement inside the curly braquets   quot return    quot  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    gt        return            lt  gt               lt div gt toolbar  sidedrawer  backdrop lt  div gt               lt main gt                   props children               lt  main gt           lt   gt             export default Layout

User · Answer

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       gt         lt input   gt

User · Answer

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        gt         lt nav class  quot navbar quot  gt  lt  nav gt     export default Header   It must be within     import React from  react    const Header        gt         lt nav class  quot navbar quot  gt  lt  nav gt      export default Header

User · Answer

Had the same error in my functional Component as function ShopCard props    const   shops          useContext ContextProvider   return      shops map  shop   gt        lt div gt  lt  div gt               Instead of function ShopCard props      const   shops          useContext ContextProvider     shops map  shop   gt       return      lt div gt  lt  div gt

User · Answer

I had same problem in the render   method  The problem comes when you return from render   as    render         return                 lt div gt Here comes JSX   lt  div gt             i e  if you start the parenthesis in a new line  Try using   render         return            lt div gt Here comes JSX   lt  div gt             This will solve the error

User · Answer

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

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

Examples related to javascript

Examples related to reactjs