'How to make interactive active line when clicked with react

I have 3 lists of a clickable links, so when you click one you go to that section and the line too.

so this is my code :

<div className="description-container">
    <div className="nav-tab">
      <ul className="description-tab">
        <li>
          <a href="/" className="active">
            Class Description
          </a>
        </li>
        <li>
          <a href="/">Testimony</a>
        </li>
        <li>
          <a href="/">FAQ</a>
        </li>
      </ul>
    </div>
  </div>

How it looks like is Image

How I want is when I clicked Testimony, the line goes there and our page got scrolled into Testimony Section.

How to improve this code so I can get that feature with React?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source