skip to Main Content

I am learning React and am stuck with the problem that the components I make, their functions don’t show any output, though there’s no error message but still I get a blank screen. But when I try to return plain text in app.js, it works fine. Here’s my code:

**Index.js **

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

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

App.js

import home from "./pages/home/home";

function App() {
  return (<home/>)
}

export default App;

Home.js (Component)

import home from "./pages/home/home";

function App() {
  return (<home/>)
}

export default App;

Kindly help me in resolving the issue

I tried to change the export by writing it with the function itself, re-run the project, reload the site a few times, but still no output.

2

Answers


  1. In React, the component names always start with a capital Letter. If its all lowercase, like <home/> in your case, it will be treated as semantic HTML element and there’s no element called home in html. Change it as follows

    import Home from "./pages/home/home";
    
    function App() {
      return (<Home/>)
    }
    
    export default App;
    
    Login or Signup to reply.
  2. React components should be named with a capital letter. In your code, you are using home in lowercase, which might be the cause of your problem.

    import Home from "./pages/home/home";
    
    function App() {
      return <Home />;
    }
    
    export default App;
     
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search