Deviopath › React

Progress Bar

Easy · State

Control a progress bar with two buttons.

"Increase" adds 10 and "Decrease" subtracts 10. The progress stays between 0 and 100.

The inner <div className="bar"> gets an inline style with the width in percent (e.g. style={{ width: "30%" }}), and a <p> shows the same value, e.g. "30%". At 100 the bar also gets the class "complete" (className="bar complete").

Next: Add a Fruit