ReactDOM only renders one element

Question

Im working on a react website and i want a slideshow as background. But either the slideshow or just the navbar gets rendered. What am i doing wrong? And I am using MUI. What am I doing wrong?

My index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import SearchAppBar from "./components/navBar/SearchBar";
import TitleText from "./components/titletext/titletext";
import App from "./components/site-background/site-background";




ReactDOM.render(<SearchAppBar />,document.getElementById("navbar"));
ReactDOM.render(<App />,document.getElementById("slideshow"));

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>


</head>
<body id="slideshow">


<div id = "navbar" />


<div id="logo" />


</body>
</html>

score 0 · Answer 1 · answered Apr 03 '22 at 03:05

0

Your HTML layout is such that the navbar is inside the slideshow:

<body id="slideshow">
  <div id = "navbar" />

So the navbar element gets removed from the DOM when React renders into the #slideshow element.

You probably wanted something like this instead:

<body>
  <div id="slideshow"></div>
  <div id = "navbar"></div>
  <div id="logo"></div>
</body>

(Don't use /> for normal tags in modern HTML - it's permitted in React, but not HTML5)

answered Apr 03 '22 at 03:05

CertainPerformance

356,069
52
309
320

Hey thanks that was an improvement but it still shows the slideshow only. I added top: 20% to the css but the navbar isnt showing, – Mustafa Bozdemir Apr 03 '22 at 03:10
Do you want the navbar to appear at the top of the page, or the bottom? If the top, reorder the HTML to match, with the slideshow element in the middle instead – CertainPerformance Apr 03 '22 at 03:12
rearranged it - now only navbar is showing ^^ – Mustafa Bozdemir Apr 03 '22 at 03:16
There isn't enough information in the question to reproduce the problem you describe. – CertainPerformance Apr 03 '22 at 03:19

score 0 · Answer 2 · answered Apr 03 '22 at 03:08

0

When you render in this way only one element can be shown at once. You would need to make one render call and have div with both elements inside of it. You can also use a react.fragment instead of a div. It simply packages all of the items inside.

answered Apr 03 '22 at 03:08

CapinCole89

1
2

i defined the components as functions - do i still have to use fragments? Does this mean I have to make a single DOM call in my application in general? – Mustafa Bozdemir Apr 03 '22 at 03:17
Yes, one dom is shown at once. So you need to arrange things within it. So you will have one overall div being shown, and within that div different components are displayed at once. ``` ``` – CapinCole89 Apr 03 '22 at 03:27
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 03 '22 at 03:48

score 0 · Accepted Answer · answered Apr 03 '22 at 03:18

You can return only one component. If you want to return multiple elements from a component use a wrapper div or React.Fragment.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import SearchAppBar from "./components/navBar/SearchBar";
import TitleText from "./components/titletext/titletext";
import App from "./components/site-background/site-background";




ReactDOM.render(
  <React.Fragment>
    <SearchAppBar />
    <App />
  </React.Fragment>
,document.getElementById("root"));

Hey ! That helped thanks a lot! Did not know that only one element can be rendered and that the rest has to be declared as Fragments! — Mustafa Bozdemir, Apr 03 '22 at 03:24

ReactDOM only renders one element

3 Answers3