Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 73935

How do I set the ProgressBar element to be visible when a nav item is clicked?

$
0
0

I have the nav component of my website below:

import React, { Component } from "react";
import { ProgressBar } from "react-bootstrap";

class Nav extends Component {
  constructor() {
    super();
    this.state = {
      percentage: 0
    };
  }

  render() {
    return (
      <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">
            Navbar
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#">
                  Home <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  href="#"
                  onClick={() =>
                    this.setState({ percentage: this.state.percentage + 100 })
                  }
                >
                  SCIQ
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  PIQ
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <div>
          <ProgressBar
            hidden
            striped
            variant="success"
            now={this.state.percentage}
          />
        </div>
      </div>
    );
  }
}

export default Nav;

The ProgressBar is currently set to "hidden". Upon clicking on one of the nav items, I would like the ProgressBar element to be set to visible.

There is already a click event on the SCIQ nav item which updates the now property of the ProgressBar element. So, I have achieved 50% of what I want in the click event. I just need to figure out how to use the setState method to let me somehow update the properties of a specific element.


Viewing all articles
Browse latest Browse all 73935

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>