Components, ReactJS - Nothing was returned from render

Question

I am trying to create a component and calling it in App.jsx (another component) and call this App.jsx in render, but it gives me error this .

Error: Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Here is the code which i done .

Component: (Greetings.Jsx)

import React from 'react'
function Greetings()
{
    let timehours=new Date()
    timehours=timehours.getHours();
    let cssStyle={
        color:'Green',
        
      }
      
      let text="";
      if(timehours>=1&&timehours<=12)
      {
       
        // z.src = window.location.origin + '/images/morning.jpeg'; 
        // document.body.backgroundImage= z.src;
        text="Good Morning";
        cssStyle.color='Green';
        // bgimg.Image=window.location.origin + '/images/morning.jpg';
        
        
      }
      else if(timehours>=12&&timehours<19)
      {
        
        // bgimg.Image=window.location.origin + '/images/morning.jpg';
        text="Good Afternoon";
        cssStyle.color='Orange';
      }
      else
      {
        text="Good Night";
        cssStyle.color='Black';
      }

      return(
        <>
            <div>
                <h1>   Hello Sir, <span style={cssStyle}>{text}</span></h1>
            </div>  
        </>
      );
}
export default Greetings;

App.Jsx


import React from 'react';
import Greetings from './Greetings'

function App()
{
    return 
    (
        <>
            <Greetings/>
        </>
        );
}

export default App;

Index.jsx

import React from 'react';
import reactDom from 'react-dom';
import ReactDOM from 'react-dom';
import "./index.css";
import App from "./App";


ReactDOM.render(<App/>,document.getElementById("root"),);

in `App.Jsx` the paranthese after the return must be on the same line. that is caused by javascript optional semicolon. — Martin, Apr 07 '21 at 11:22
yea, i just recreate the app.jsx, i posted the answer below, and it works now, thank you :) — TimeToCode, Apr 07 '21 at 11:23
Duplicate: https://stackoverflow.com/questions/46741247/nothing-was-returned-from-render-this-usually-means-a-return-statement-is-missi — , Apr 07 '21 at 12:17

score 1 · Accepted Answer · answered Apr 07 '21 at 11:21

1

I have just recreate the App.jsx file which is

import React from 'react'

import Greetings from './Greetings'

function App()
{
    return(<Greetings></Greetings>);
}

export default App;

and works for me now!!!

answered Apr 07 '21 at 11:21

TimeToCode

1,458
3
18
60

you can write return() too. – TimeToCode Apr 07 '21 at 11:34
Or `return ;` – Apr 07 '21 at 11:59

StepUp · Answer 2 · 2021-04-07T12:42:39.840

0

There is no need to have empty brackets and in App.Jsx the parantheses after the return must be on the same line (special thanks to @Martin):

Greeting.jsx:

import React from 'react'

function Greetings()
{
    // the other code is omitted for the brevity    
    return(            
        <div>
            <h1>   Hello Sir, <span style={cssStyle}>{text}</span></h1>
        </div> 
    );
}
export default Greetings;

and:

import React from 'react';
import Greetings from './Greetings'

function App()
{
    return <Greetings/>;
}

export default App;

edited Apr 07 '21 at 12:42

answered Apr 07 '21 at 11:22

StepUp

36,391
15
88
148

1

Note the `.jsx` extension, which causes this: https://codesandbox.io/s/competent-sea-kfln9?file=/src/App.jsx Also see [this comment](https://stackoverflow.com/questions/66984973/components-reactjs-nothing-was-returned-from-render/66985051?noredirect=1#comment118404572_66984973) by Martin – Apr 07 '21 at 11:56
@ChrisG I see what you mean! Thank you for example! I've updated answer. I think now there is no reason to downvote:) – StepUp Apr 07 '21 at 12:12
1

Yeah, I removed my downvote :) Still, your answer doesn't explain what causes the issue; instead it suggests it is caused by the (unnecessary) `<>...>` wrapper. The error is explicitly the `return` in a line on its own, and any answer to this question should address that. SO is primarily about future users finding this and less about helping the OP. edit: and of course, it's also a duplicate: https://stackoverflow.com/questions/46741247/nothing-was-returned-from-render-this-usually-means-a-return-statement-is-missi – Apr 07 '21 at 12:14

Components, ReactJS - Nothing was returned from render

2 Answers2