Question 383697 in Html Question posted in
Some basic documentation can be found here.

Html – How to place the root div with React renderer?

I created a MainPage folder, inside of which I created a Main.js file. I want to display certain contents on my page with this. Even though I call Main.js in the App.js file, the content does not appear. I tried several solutions, but none of them worked. I tried creating a div in the HTML section wi th the "root" id, but I’m not entirely sure where to place it.

So here is the Main.js

import React from 'react';
import './Main.css';

export default function Main()
{
return
(

   <body>
      <div id='root'>
      <header className="header">
        <div className="top-bar">
          <div className="top-bar__content">
            <section className="phone">
              <i className="fa-solid fa-phone icon"></i>
              <span></span>
            </section>
            <section className="email">
              <i className="fa-solid fa-envelope icon"></i>
              <span></span>
            </section>
          </div>
        </div>

        <div className="bottom-bar">
          <div className="bottom-bar__content">
            <a href="#" className="logo">
              <img className="logo__img" src="pictures/logo.svg" alt="logo" />
              <span className="logo__text"></span>
            </a>

            <nav className="nav">
              <ul className="nav__list">
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="btn" href="#"></a>
                </li>
              </ul>
            </nav>
      
            <div className="hamburger">
              <div className="bar"></div>
              <div className="bar"></div>
              <div className="bar"></div>
            </div>
          </div>
        </div>

      </header>
      </div>
      </body>

);
}

the App.js

import React from 'react';
import Main from './MainPage/Main';

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

export default App;

and the index.js

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

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

2

Answers


  1. 0

    Your index.html file should be the one with the root id

    index.html

    <!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="pragma" content="no-cache">
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    As suggested in @Joshua’s answer your index.html file should contain the root id.

    And I tried to compile your code in a sandbox, and this is the change which fixed the issue for me.

    In your main page you wrote as below

    ...
export default function Main()
{
return
(

   <body>
      <div id='root'>
...

    Change this to as below, this fixed the issue for me

    ...
export default function Main()
{
return (

   <body>
      <div id='root'>
...

    This bracket ( seems to be messing with your code. Please check

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search