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