import { Component } from "react";
import getCharacters from "../getCharacters/getCharacters";
import OneCharacter from "../oneCharacter/oneCharacter";
import Button from "../button/button";
import rightArrow from '../../imgs/right-arrow.png';
import leftArrow from '../../imgs/left-arrow.png';
import './carousel.scss';
class Carousel extends Component {
constructor() {
super();
this.state = {
offset: 4,
}
}
plusChars() {
this.setState(({offset}) => ({
offset: offset + 1
}))
}
minusChars(){
if (this.state.offset === 0) {
return;
}
this.setState( ({offset}) => ({
offset: offset - 1
}))
}
onUpdate(){
this.setState(({ offset }) => ({
offset: offset + 4,
}))
console.log(this.state.persons);
}
render() {
return (
<section className="carousel">
<div className="carousel__wrapper">
<div className="carousel__inner">
{Array.from({ length: this.state.offset }).map((_, i) => <OneCharacter key={i} offset={i + 1} />)}
</div>
<div className="carousel__buttons">
<div className="carousel__leftA" onClick={this.minusChars}><img src={leftArrow} alt="left arrow" /></div>
<div className="carousel__rightA" onClick={t<code lang="javascript">
</code>his.plusChars}><img src={rightArrow} alt="right arrow" /></div>
</div>
</div>
<Button name={'Add Hero'} onClick={this.onUpdate} />
</section>
)
}
}
export default Carousel;
я просто предложил запись короче, это не решение к вопросу, так просто от скуки написал
результат тот который нужен или нет ? или всё ещё не так работает ?