Где допускаю ошибку?

Question

[Рома]

Хочу чтобы при клике на 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;

Comments

[Deniel]

Используйте хуки. Это больше упрощает работу с состоянием

Answer 1

[Алексей Уколов]

Нужно в setState заменить forEach на map (только не бездумно, а поняв разницу между ними).

Comments

[Рома]

Спасиб!