Как отобразить определенное кол-во элементов массива и переключаться между ними по клику?

Question

[nivaech]

Есть массив с логотипами, который нужно отобразить на странице, выглядит примерно так:

const orgs = [
    {
      id: 1,
      src: url,
    },
    {
      id: 2,
      src: url,
    },
    {
      id: 3,
      src: url,
    },
    {
      id: 4,
      src: url,
    }
]

Сейчас в массиве 12 элементов. Нужно сделать так, чтобы в компоненте отображалось только восемь, в два ряда по четыре штуки в каждом. Будет кнопка-переключатель, по клику по которой вместо первых восьми элементов должны отобразиться следующие 8 (или четыре, в данном случае). Выглядит он как-то так: по сторонах кнопки-иконки, переключатели вперед\назад, а в центре показатель текущей "страницы" отображаемых элементов. Все сделано с Material ui.

<Grid container direction="row" alignItems="center" spacing={2}>
      <Grid item>
        <IconButton>
          <ArrowBackIosIcon fontSize="small" />
        </IconButton>
      </Grid>
      <Grid item>
        <Typography className={classes.pageCounter}>1 / 3</Typography>
      </Grid>
      <Grid item>
        <IconButton>
          <ArrowForwardIosIcon fontSize="small" />
        </IconButton>
      </Grid>
    </Grid>

Сам компонент, в котором отображается массив, выглядит так. Ширина его ограничена так, чтобы в один ряд влезало не больше четырех элементов. Внизу мапятся логотипы.

...
    <Container maxWidth="lg">
      <Grid container direction="row" justify="space-between">
        <Grid item className={classes.leftContainer}>
          <Grid container className={classes.textContainer} direction="column" justify="space-between">
            <Grid item>
              <Grid container direction="column" spacing={3} style={{ width: '256px' }}>
                <Grid item>
                  <Typography variant="h4">Some title</Typography>
                </Grid>
                <Grid item>
                  <Typography className={classes.text}>
                    Irure deserunt aliquip ad dolor et reprehenderit ad dolor dolor. Est magna laboris dolor pariatur
                    Lorem excepteur.
                  </Typography>
                </Grid>
              </Grid>
            </Grid>

            <Grid item>
              <PageSwitcher />
            </Grid>
          </Grid>
        </Grid>

        <Grid item xs>
          <Grid container justify="flex-end">
            {orgs.map(org => (
              <Grid item key={org.id} className={classes.logoContainer}>
                <SquareImage src={org.src} alt="hello" />
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Grid>
    </Container>
...

Сейчас это выглядит так, как на первой картинке. Нужно, чтобы отображалось только восемь элементов и была возможность переключаться на другие восемь по клику.

Comments

[Daniil]

Нужно 8 - обрезай массив. Например slice. Сделать кнопку с хендлером на клик и указывай другой диапазон для нового массива.

Answer 1

[Demian Smith]

Идея такая:

const [page, setPage] = useState(1);
const itemsPerPage = 8;
...
{orgs.slice((page - 1) * itemsPerPage, page * itemsPerPage).map(...)}
...
<button onClick={() => setPage(page + 1)}>Next</button>
<button onClick={() => setPage(page - 1)}>Previous</button>

Конечно, нужно предусмотреть чтоб по нажатию на кнопки Next и Previous мы не уезжали за пределы мыссива.

Comments

[nivaech]

Идею понял, спасибо за направление