Adding HTML body attributes to a React App?

March 1, 2024

I am very new to React and am trying to convert a pre-made HTML site into a React App. I have converted the vast majority of the functionality over just fine, however I am trying to get the nav-bar to work as it does in the original HTML, but cannot.

Here is the original HTML for the nav-bar functionality:

<body data-spy="scroll" data-target="#pb-navbar" data-offset="200">
  <nav class="navbar navbar-expand-lg site-navbar navbar-light bg-light" id="pb-navbar">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#section-home">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#section-portfolio">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="#section-resume">Resume</a></li>
        <li class="nav-item"><a class="nav-link" href="#section-about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#section-contact">Contact</a></li>
      </ul>
    </div>
  </div>
  </nav>

And here is my nav-bar React component:

import React, { Component } from 'react'

export default class TopNavBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg site-navbar navbar-light bg-light" id="pb-navbar">
        <div className="container">
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
            <ul className="navbar-nav">
              <li className="nav-item"><a className="nav-link" href="#section-home">Home</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-resume">Resume</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-about">About</a></li>
              <li className="nav-item"><a className="nav-link" href="#section-contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    )
  }
}

Here is the React App.js file:

import './App.css';
import TopNavBar from './components/Topnavbar';
import Introduction from './components/Introduction';
import Resume from './components/Resume';
import About from './components/About';
import Services from './components/Services';
import Contact from './components/Contact';
import Footer from './components/Footer';

function App() {
  return (
    <div id="colorlib-page">
      <div id="container-wrap">
        <TopNavBar></TopNavBar>
        <div id="colorlib-main">
          <Introduction></Introduction>
          <Services></Services>
          <Resume></Resume>
          <About></About>
          <Contact></Contact>
          <Footer></Footer>
        </div>
      </div>
    </div>
  );
}

export default App;

I am pretty sure the functionality that is missing is due to the <body> tag’s attributes being: data-spy="scroll" data-target="#pb-navbar" data-offset="200", however I am not sure how to add this to the overall React app.

It also seems to be missing the CSS effects on the nav-bar, as it does not smoothly scroll when one clicks on a nav-link, but instead instantly takes you to the location.

Any direction on where to go from here would be greatly appreciated!

>Solution :

Somewhere in your React application there is a <body> element. It’s unlikely to be in the <App> component, but likely to be in whatever uses the <App> component.

For example, you may have an index.html which has an otherwise empty but complete/valid HTML document structure that may contain a single <div> in the body, and the React app is initialized in that <div>.

The <body> element in that file is the <body> element used in the resulting application. That’s where you can make those changes.