Почему свойство active id-которого меньше чем count не меняется на противоположное на true?

Хочу чтобы при клике на next менялось состояние: count увеличивался на 1(что происходит), а свойство active id-которого меньше чем count менялось на противоположное на true(не меняется). Почему? Что и где исправить?

import React, { Component } from 'react';
import './Apps.css';


class Apps extends Component {  

state = {    
count: 0,   
circles: [
 {id: '0', number: '1', active: false},
 {id: '1', number: '2', active: false},
 {id: '2', number: '3', active: false},
]
};


onToggleNext = (count) => {  
this.setState({    
count: this.state.count + 1,
circles: this.state.circles.forEach((circle, idx)=> {
if (circle.id < count) {
    circle.active=!circle.active
}    
})
})
}

onTogglePrev = (id) => {  
this.setState({    
count: this.state.count - 1   

})
}

render() {

const {circles} = this.state;
let classNames = 'circle';
circles.forEach((circle)=> {
if (circle.active) {
   classNames += ' active'; 
}

});

return (
<div className="container">
  <div className="progress-container">
    <div className="progress" id="progress"></div> 
    {this.state.circles.map((circle) => (<div key={circle.id} className={classNames}>{circle.number} 
</div>))}

  </div>

  <button className="btn" id="prev" onClick={this.onTogglePrev}>Prev</button>
  <button className="btn" id="next" onClick={this.onToggleNext}>Next</button>
</div>
);
}

}

export default Apps;

Ответы (0 шт):