tbg-ecomm-nextjs/pages-sections/latest_news/news.js

import React, { useState, useEffect } from 'react';
import Router, { withRouter } from 'next/router'

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import ReactPaginate from 'react-paginate';

// component
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";
import Paginations from "components/Pagination/Pagination.js";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, news, ...props }) {
  const [isLoading, setLoading] = useState(false); //State for the loading indicator
  const startLoading = () => setLoading(true);
  const stopLoading = () => setLoading(false);
  useEffect(() => { //After the component is mounted set router event handlers
    Router.events.on('routeChangeStart', startLoading); 
    Router.events.on('routeChangeComplete', stopLoading);

    return () => {
        Router.events.off('routeChangeStart', startLoading);
        Router.events.off('routeChangeComplete', stopLoading);
    }
  }, [])
  const pagginationHandler = (page) => {
    const currentPath = props.router.pathname;
    const currentQuery = props.router.query;
    currentQuery.page = page.selected + 1;

    props.router.push({
        pathname: currentPath,
        query: currentQuery,
    });
  };

  const classes = useStyles();
  const latnews = news.map((data) => {
    return (
    <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
      <Card style={{width: "20rem"}}>
        <img
          style={{height: "180px", width: "100%", display: "block"}}
          className={classes.imgCardTop}
          src={`${backend}${data.img[0]["url"]}`}
        />
        <CardBody>
          {/* <h4 className={classes.cardTitle}>{data.title}</h4> */}
          <p>{data.title}</p>
          <Button color="info" onclick="myFunction()" id="myBtn">Read More</Button>
        </CardBody>
      </Card>
    </Grid>
    );
  })
  return (
    <div className={classes.section} id="notifications">
      <div align="center">
          <h2>Latest News</h2>
      </div>
      <div>
        <GridContainer justify="center">
          {latnews}
          {latnews}
        </GridContainer>
      </div>
      <div align="center">
        <Paginations
          color="info"
          pages={[
            { text: 1 },
            { text: "..." },
            { text: 5 },
            { text: 6 },
            { active: true, text: 7 },
            { text: 8 },
            { text: 9 },
            { text: "..." },
            { text: 12 }
          ]}
        />
      </div>
    </div>
  );
}

export default DataLatestNews;