ReactDOM only renders one element

April 3, 2022

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>

>Solution :

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"));