How to display a certain number of array elements and switch between them on click?

Question

JavaScript

In general, there is an array of logos that needs to be displayed on the page. The array looks something like this:

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

You need to iterate over it with map and render it in JSX. There are currently 12 elements in the array. You need to make sure that only eight are displayed in the component, in two rows of four each. There will be a toggle button, on clicking on which, instead of the first eight elements, the next 8 (or four, in this case) should be displayed. It looks something like this: on the sides of the icon button, switches forward / backward, and in the center is the indicator of the current "page" of the displayed elements. Everything is done with 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>

The component itself, in which the array is displayed, looks like this. Its width is limited so that no more than four elements fit into one row. The logos are at the bottom.

...
    <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>
...

Now it looks like the first picture. It is necessary that only eight elements are displayed and it is possible to switch to other eight on click. Can you tell me?

Answer 1

The idea is this:

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>

Of course, we need to ensure that by clicking on the Next and Previous buttons we do not leave the myssive.