ProgressBar.js

// ProgressBar.js

import React from 'react';
// the custom styling for progress bar app
import './progress-bar.css';

// pass percentRange state through props to Range an ProgressBar components
const Range = (props) => {
    return (
        // render current the filled range of progress bar along its width
        <div className="range" style={{width: `${props.percentRange}%`}}/>
    );
};

const ProgressBar = (props) => {
    return (
        <div className="progress-bar">
            {/*render available progress bar’s limit*/}
            <Range percentRange={props.percentRange}/>
        </div>
    );
};

...