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"></div>
//more html code
</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>
);
New contributor
SZENTIOSZ the SZAMOSZ is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.