Попробуйте теперь заставить блок "бегать" за кнопкой изменяя ее положение различными методами.- это похоже на группировку, если один должен бегать якобы за другим, они должны быть в едином блоке, и перемещать уже не единый блок, а целую группу, что бы казалось что один бегает за другим.
А если открыть документацию и посмотреть, что делает map со своим вторым параметром?- вызывает callback для каждого элемента, но в качестве контекста - будет второй агрумент который был передан в метод map, что-то типа этого
fn.call(второй аргумент map, остальные аргументы) , в this - будет массив [ num / arr.length | 0, num % arr.length ] - но моя проблема не в этом была, а в том что num / arr.length | 0 - эта запись, а именно оператор побитового или, я например не часто его вижу, и что бы понять сходу какой будет результат num / arr.length | - здесь, то пришлось открыть документацию и вспомнить а что делает оператор побитового или, и продебажить.только пока значение index не превышает верхнюю границу массива.что значит верхняя граница массива ? длина массива ?
const newArr = arr.map(function(n, i, a) {
return n + this[0] + (((i - index) % a.length + a.length) % a.length < this[1]);
}, [ num / arr.length | 0, num % arr.length ]);% a.length и побитовое или в массиве, которым толком никто нигде никогда не пользуется, и в большинстве случаев человек пойдёт гуглить и вспоминать что делает этот оператор
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;
можно это конечно через debounce или throttle обернуть, но всё равно - это идея не хорошая