title: React components doesn't display content
body: <p>I am creating a web application using Laravel and React JS. I have written multiple JSX components to load the page. All the components are mounting properly without any errors, but here the problem is Some heading tags and some form content are not displaying on the page and also most of the text and other content missing from the page. Even those are rendering on component and I can inspect those using browser console and react dev tools. But it is not displaying on the page. I tried so many ways to fix this problem, but finally, I ended up with failure. Any help regarding fix this issue would be appreciable.</p>
  
  <p>Here's my code:</p>
  
  <p>HomeBanner.jsx</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  class HomeBanner extends Component {
      render() {
          return (
              &lt;div className="banner layer" id="home"&gt;
                  &lt;div className="container"&gt;
                      &lt;div className="row banner-text"&gt;
                          &lt;div className="col-lg-12 col-md-12 mt-lg-0 mt-5 banner-form" data-aos="fade-left"&gt;
                              &lt;h5&gt;Exclusively We are Expert in Medical Professional&lt;/h5&gt;
                              &lt;form action="#" className="mt-4 banner-form-input"&gt;
                                  &lt;p&gt;What are you Looking?          
                                      &lt;label className="container-radio first-radio"&gt;Consultant
                                          &lt;input type="radio" name="radio" /&gt;
                                          &lt;span className="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                      &lt;label className="container-radio"&gt;Diagonastic Center
                                          &lt;input type="radio" name="radio" /&gt;
                                          &lt;span className="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                  &lt;/p&gt;
                                  &lt;div className="row"&gt;
                                      &lt;div className="col-lg-4"&gt;
                                          &lt;div className="location-wrapper"&gt;
                                              &lt;div className="demo"&gt;
                                                  &lt;input type="text" className="location-input" placeholder="Location" /&gt;&lt;input type="submit" value="" className="sub-loc" /&gt;&lt;i className="fa fa-crosshairs"&gt;&lt;/i&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div className="col-lg-8"&gt;
                                          &lt;div className="search-wrapper"&gt;
                                              &lt;div className="demo1"&gt;
                                                  &lt;input type="text" className="location-input" placeholder="Search by specialist / Name / Clinic" /&gt;&lt;input type="submit" value="" className="sub-ser" /&gt;&lt;i className="fa fa-search"&gt;&lt;/i&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                              &lt;div className=" py-md-3 circle-icons"&gt;
                                  &lt;div className="row"&gt;
                                      &lt;div className="col-lg-4 col-md-6"&gt;
                                          &lt;img src="./public/images/home-1.png" /&gt;
                                          &lt;span&gt;Schedule A &lt;br /&gt; Medical Checkup&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div className="col-lg-4 col-md-6"&gt;
                                          &lt;img src="./public/images/home-2.png" /&gt;
                                          &lt;span&gt;Appointment with &lt;br /&gt; Best Doctor Near You&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div className="col-lg-4 col-md-6"&gt;
                                          &lt;img src="./public/images/home-3.png" /&gt;
                                          &lt;span&gt;Get Your Reports &lt;br /&gt; Over Email&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>export default HomeBanner;</p>
  
  <p>App.jsx</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  import HomeBanner from '../elements/HomeBanner';
  import Analytics from '../elements/Analytics';
  import FeedbackHome from '../elements/FeedbackHome';
  
  class App extends Component {
      render() {
          return (
              &lt;div className = 'index-page'&gt;
                  &lt;HomeBanner /&gt;
               &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>Router.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Route, NavLink, Link, BrowserRouter as Router, Switch } from 'react-router-dom';
  
  import NavBar from './components/NavBar';
  import Footbar from './components/Footbar';
  
  import App from './containers/App';
  
  const routing = (
      &lt;Router&gt;
          &lt;div&gt;
              &lt;NavBar /&gt;
              &lt;Switch&gt;
                  &lt;Route exact path="/" component={App} /&gt;
              &lt;/Switch&gt;
              &lt;Footbar /&gt;
          &lt;/div&gt;
      &lt;/Router&gt;
  )
  
  export default routing;
  </code></pre>
  
  <p>Main.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import routing from './router.js'
  
  ReactDOM.render(routing, document.getElementById('root'));
  </code></pre>
  
  <p>For referrence I am attaching the normal html template and react template, so that it will help you to understand what things were missed.</p>
  
  <p>Html: 
  <a href="https://i.stack.imgur.com/CsD6h.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>React:
  <a href="https://i.stack.imgur.com/SuN08.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>HTML:
  <a href="https://i.stack.imgur.com/KixdN.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>React:
  <a href="https://i.stack.imgur.com/JTsTq.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>If you see above pictures, you will find the missing things on react template. Even I wrote same code for two templates and now also I can inspect that missing elements from my dev tools but its not displaying in the browser.</p>