Nivaech
@Nivaech
фотограф, видеограф, графический дизайнер

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

5efdac2b99416644907291.png

В общем, есть массив з логотипами, который нужно отобразить на странице. Массив выглядит примерно так:
const orgs = [
    {
      id: 1,
      src: url,
    },
    {
      id: 2,
      src: url,
    },
    {
      id: 3,
      src: url,
    },
    {
      id: 4,
      src: url,
    }
]

Нужно пройтись по нему с помощью map и отрендерить в JSX. Сейчас в массиве 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>
...


Сейчас это выглядит так, как на первой картинке. Нужно, чтобы отображалось только восемь элементов и была возможность переключаться на другие восемь на клик. Подскажете?
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
search
@search
мама говорит что я особенный
Идея такая:

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 мы не уезжали за пределы мыссива.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы