While attempting to create a new component and call it within App.jsx (another component) for rendering, an error is being encountered.
Error: Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Below is the code I have written:
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"));