Where am I making a mistake?

Question

React

I want the state to change when next is clicked: count increases by 1 (what happens), and the property of the active id, which is less than count, changes to the opposite to true (does not change). Why? What and where to fix?

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;

Answer 1

It is necessary to replace forEach with map in setState (only not thoughtlessly, but having understood the difference between them).