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

import React, { useState, useEffect } from "react";
import Router, { withRouter } from "next/router";
import ReactHtmlParser from "react-html-parser";
// @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>
                        {data.published_at}
                    </div>
                </div>
                <br></br>
                <h5 align="justify">{ReactHtmlParser(data.description)}</h5>
            </div>
        );
    });
    return <div>{latnews}</div>;
};

export default DataLatestNews;