import React, { useEffect, useMemo, useState } from "react"; import { Card, Col, Form, Row, Dropdown, } from "react-bootstrap"; import Flatpickr from "react-flatpickr"; import { jobGrid } from "../../../../common/data/appsJobs"; import BreadCrumb from "../../../../Components/Common/BreadCrumb"; import { Head, Link } from "@inertiajs/react"; import Layout from "../../../../Layouts"; import Pagination from "../../../../Components/Common/Pagination"; const JobGrid = () => { const [jobGridData, setJobGridData] = useState(); const [currentPage, setCurrentPage] = useState(1); //pagination const perPageData = 7; const indexOfLast = currentPage * perPageData; const indexOfFirst = indexOfLast - perPageData; const currentdata = useMemo(() => jobGrid?.slice(indexOfFirst, indexOfLast), [indexOfFirst, indexOfLast]) useEffect(() => { setJobGridData(currentdata) }, [currentdata]); return (

Result: 7

All View
  • Action
  • Another action
  • Something else here
    • {/*

    Velzon invites young professionals for an intership!

    Don't miss your opportunity to improve your skills!

    */} { (jobGridData || []).map((item : any, key : any) => (
    {item.jobTitle}

    {item.companyName}

    {" "} {item.location}
    {" "} {item.postDate}

    {item.description}

    {item.requirement.map((subItem:any, key:any) => ( { subItem === "Full Time" ? {subItem} : subItem === "Freelance" ? {subItem} : {subItem} } ))}
    Apply Job Overview
    ))}
    ); }; JobGrid.layout = (page:any) => export default JobGrid;