Задача состоит в следующем, у меня есть каталог с товарами.
От количества элементов в массиве зависит количество страниц в каталоге, которые задаются здесь:
<div className={styles.ItemsAndFlip}>
<div className={styles.items}>{block}</div>
<div className={styles.flipping}>
{z.map((item) => (
<p onClick={reading}>{item}</p>
))}
</div>
</div>
А здесь я пушу в массив индекс каждого элемента внутри массива Json:
let z = [];
Json.forEach((item, index) => {
z.push(index);
});
Всё остальное происходит здесь:
import React, { useState } from "react";
import Json from "../JSON/jsonBackEnd";
import styles from "../Drawer.module.scss";
function Products() {
const [pages, setPages] = useState(0);
const reading = (event) => {
setPages(event.target.innerHTML);
};
const [checked, setChecked] = useState();
const check = (event) => {
setChecked(event.target.innerHTML);
};
let block = Json[pages].map((item) => (
<div className={styles.item_description}>
<img src={item.image} />
<div className={styles.double}>
<p className={styles.quantity}>{item.quantity}</p>
<p className={styles.priceLow}>{item.price}</p>
</div>
<p className={styles.name}>{item.name}</p>
<p className={styles.price}>{item.price}</p>
</div>
));
let z = [];
Json.forEach((item, index) => {
z.push(index);
});
return (
<div className={styles.ItemsAndFlip}>
<div className={styles.items}>{block}</div>
<div className={styles.flipping}>
{z.map((item) => (
<p onClick={reading}>{item}</p>
))}
</div>
</div>
);
}
export default Products;
Вопрос состоит в следующем. Как сделать так, чтобы, допустим, если в массиве у меня будет 200 элементов, то этот код отобразил мне не все цифры от 1 до 200, а, например, только 4 цифры?
Т.е., сначала от 0 до 5, когда перешел на 1 страницу, то с 0 до 5, когда перешел на 2 страницу, то со 1 до 6, когда перешел на 3 страницу, то отображать страницы со 2 до 7... и когда на 196 странице, то отображать со 195 по 199 страницы.
Как это сделать на практике?
Помогите, плиз. С меня благодарность.
