tbg-ecomm-nextjs/pages-sections/carrer/carrer_details.js

import React, { useState, useEffect } from 'react';

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// component
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";

const useStyles = makeStyles(styles);

const DataCarrer = function ({ backend, detailcarrer, ...props }) {
    const classes = useStyles();
    const carrer = detailcarrer.map((data) => {
        return (
        <Card>
            <CardHeader color="info"><h3><div align="center">{data.name}</div></h3></CardHeader>
            <CardBody>
                <div align="center">
                    <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
                </div>
                <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5>
                <h5 align="center">Syarat & Tata Cara Pendaftaran :</h5>
                <h5 align="center" align="justify">
                    {data.description}
                </h5>
            </CardBody>
        </Card>
        );
    })
    return (
        <div>
            {carrer}
        </div>
    );
}

export default DataCarrer;