在 React with Pagination 中显示图像列表

Question

I am very new to React so please help me out here. I have a simple React Function Component that has an image tag and I would like to use this image component in my main component and render it. That works fine.

I want to render the same Image component 10 - 50 times with Pagination. Can someone send me a link or help me how can I show the list of images with the function component containing Pagination.

Image Component

function ImageFunctionComponent(){
    return (
   <img alt='Test' 
   src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcStvpLEylZEJ-dJLEYU3ApbyDooj-_98dYQuw&usqp=CAU"/>   
        );
}

export default ImageFunctionComponent;

index.js

class ImageTest extends React.Component {
  render(){
    return(
   <>
  <ImageFunctionComponent></ImageFunctionComponent>
  <ImageFunctionComponent></ImageFunctionComponent>
  <ImageFunctionComponent></ImageFunctionComponent>
  <ImageFunctionComponent></ImageFunctionComponent>
  <ImageFunctionComponent></ImageFunctionComponent>
  <ImageFunctionComponent></ImageFunctionComponent>
  
</>
)
;
  }
}

const element=<ImageTest />

ReactDOM.render(element,document.getElementById("root"));

I want to only show two images on one page and then have a pagination to show next two images. How can I do that in React?

Answer 1

firstly for this specific case. I would store the images in an array inside the pagination component and also store the page counter like this

const LIMIT = 2;
const [images, setImages] = useState([<ImageFunctionComponent/>, <ImageFunctionComponent/>, ...]);

const [page, setPageCounter] = useState(0);

then bind the left arrow of the pagination to: setPageCounter(page - 1); // taking in count if page is not zero setPageCounter(page - 1); // taking in count if page is not zero and the right arrow to setPageCounter(page + 1); // taking in count page * LIMIT < array.length setPageCounter(page + 1); // taking in count page * LIMIT < array.length

then in the render is just to return:

const renderImages = [];
for(let i = page*LIMIT; i < page*LIMIT + LIMIT; i++) {
        renderImages.push(images[i]);
}
return (<>
        renderImages
</>);