What is wrong with my attempt to make React Smooth-Scrolling work?

Question

Im trying to use this package to implement smooth scroll within a Navbar:

https://www.npmjs.com/package/react-scroll

Here's my navbar component:

Navbar.js

import React from "react";
import { Section1, Nav, NavLink, Bars, NavMenu } from "./NavbarElements";
import { Link, animateScroll as scroll } from "react-scroll";

const Navbar = () => {
  return (
    <>
      <Section1>
        <Nav>
          <Bars />
            <Link
              activeClass="active"
              to="section2"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Home
            </Link>
            <Link
              activeClass="active"
              to="section3"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Web
            </Link>
            <Link
              activeClass="active"
              to="section4"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Games
            </Link>
            <Link
              activeClass="active"
              to="section5"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              About
            </Link>
        </Nav>
      </Section1>
    </>
  );
};

export default Navbar;

and here's my App.js

App.js

import React from "react";
import "./App.css";

import Navbar from "./components/navbar";
import HomeSection from "./components/home-section";
import WebSection from "./components/web-section";
import GameSection from "./components/games-section";
import AboutSection from "./components/about-section";

function App() {
  return (
    <>
      <Navbar />
      <HomeSection id="section2" />
      <WebSection id="section3" />
      <GameSection id="section4" />
      <AboutSection id="section5" />
    </>
  );
}

export default App;

What am I missing? I thought I ID'd everything correctly but maybe not? Sorry im a noob. Any glaring issues here I'm missing? Is there a better way to implement one page smooth scrolling with react?

https://imgur.com/PvRRMPL

Answer 1

The way react component works that anything you put in the angle bracket its gonna take it as a props here you are not setting up and id you are passing down the prop to your components

<HomeSection id="section2" /> //this is passing props to your homeSection Component

here is how you can fix it:

const HomeSection (props) =>{

return(
<div id={props.id}>  //your parent div

</div>
)

or you can wrap it like that

<div id="id="section2"">
<HomeSection  />
</div>

Answer 2

If anyone ever sees this and needs a solution, you need to wrap <Element> tags around the component like so:

import { Element } from "react-scroll";


const HomeSection = () => {
  return (
    <>
      <Element id="section2" name="home">
        <Section2>
          /* CODE */
        </Section2>
      </Element>
    </>
  );
};

export default HomeSection;