tbg-ecomm-nextjs/pages-sections/latest_news/news_details.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 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 (
        <div className={classes.section} style={{padding:"40px"}}>
            <div align="center" style={{marginTop:"-40px"}}>
                <h2>{data.title}</h2>
            </div><br></br><br></br>
            <div align="center">
                <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
            </div><br></br><br></br>
            <h5 align="justify">
                {data.description}
            </h5>
        </div>
        );
    })
    return (
        <div>
            {latnews}
        </div>
    );
}

export default DataLatestNews;