As a newcomer to React, I may use the wrong terms so please bear with me.
I am attempting to implement pagination for an array of components. To achieve this, I have divided the array into pages based on the desired number of items per page and stored each page in a new array like so:
const limit = 4
const numPages = 20
let pagewrapper = []
for (let i = 0; i < numPages; i++) {
let start = i * limit
let end = start + limit
let pageItems = children.slice(start, end)
// Skip first array push as 'page 1' is already showing.
if (end != limit) {
pagewrapper.push(<Grid gridContainerStyles={'grid-page__' + i} items={pageItems} />)
}
}
Furthermore, I've added a basic button to display one page at a time.
<Button
onClick={this.pagerHandleClick}
>
{'Show more'}
</Button>
The corresponding handler is:
pagerHandleClick() {
this.setState(state => ({
page: state.page + 1,
}))
}
However, I'm now facing uncertainty on how to instruct each <Grid /> component to reveal itself. The solutions suggested online involve wrapping each item in its own conditional statement, which seems cumbersome.
In the past, I would have achieved this using Vanilla JS or JQuery with a simple getElementByClass. But I am unsure if this approach translates directly to React.
Could someone provide guidance on the next steps?
Thank you in advance.