Struggling to apply styling to the element labeled as "progress", I've tried multiple options but just can't seem to get it right.
Any assistance or clues would be greatly welcomed! Here is the code snippet for the component:
constructor(props) {
super(props);
this.state = {
arrIterator: 0,
counter: 0,
sets: props.ids.sets,
exercises: props.program,
ids: props.ids
}
// Variable used to determine new round initiation --> Reset counter
this.newRoundOn = ((this.state.exercises.length /this.state.sets) -1);
// Calculates percentage for progress bar
let barPercentage = ((this.state.arrIterator / this.state.exercises.length) * 100) +"%";
this.style = {
width: {barPercentage}
}
}
// Displays Progress Bar
renderProgressBar() {
return(
<div className="card-panel" id="progression-panel">
<div className="row">
<h5 className="col s8">Progression</h5>
<h5 className="col s4 right-align">{this.state.arrIterator +1} / {this.state.exercises.length}</h5>
</div>
<div className="progress" style={style}>
<div className="determinate"></div>
</div>
</div>
);
}