Home Why I am getting the error: Uncaught Error: HomePage(…): Nothing was returned from render. This usually means a return statement is missing

Questions

Why I am getting the error: Uncaught Error: HomePage(…): Nothing was returned from render. This usually means a return statement is missing

byMR

January 2, 2022

Node version: 17.3.0

NPM version: 8.3.0

I am learning react js. While practicing a project I am getting this error.
Error:

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

My code are given below:

index.js

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

app.js

import './App.css';
import HomePage from './homepage';

function App() {
  return (
    <div className="App">
      <HomePage />
    </div>
  );
}

export default App;

homepage.jsx

import React from 'react';

const HomePage = () => {
  <div className="homepage">
    <div className="directory-menu">
      <div className="menu-item">
        <div className="content">
          <h1 className="title">HATS</h1>
          <span className="subtitle">SHOP NOW</span>
        </div>
      </div>
    </div>
  </div>;
};

export default HomePage;

Full image of error

How to solve this error? Please help me to solve this problem.

>Solution :

You are not returning anything from the function.

const HomePage = () => {
  return <div className="homepage">
    <div className="directory-menu">
      <div className="menu-item">
        <div className="content">
          <h1 className="title">HATS</h1>
          <span className="subtitle">SHOP NOW</span>
        </div>
      </div>
    </div>
  </div>;
};

const HomePage = () => (
  <div className="homepage">
    <div className="directory-menu">
      <div className="menu-item">
        <div className="content">
          <h1 className="title">HATS</h1>
          <span className="subtitle">SHOP NOW</span>
        </div>
      </div>
    </div>
  </div>;
);

would be correct way