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.