completed working on the functionality for the sorting button found in the filter results component

src/App.jsx

@@ -7,6 +7,8 @@ import { teamMembers } from "./data/teamData";
 import WyChooseUs from "./components/whyChooseUs/WhyChooseUs";
 import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent";
 import { showCaseData } from "./data/showCaseData";
+import FilterResults from "./components/FilterResults/FilterResults";
+import {filterData} from "./data/filterData"
 import "./App.css";
 import JobsShowcase from "./components/JobsShowcase/JobsShowcase";
 import { showcaseData } from "./data";
@@ -95,6 +97,7 @@ function App() {
   const { t } = useTranslation();
   return (
     <div>
+      <FilterResults filterData={filterData}/>
       <RoadMaps />
       <Hero />
       <JobsFinder />

src/components/FilterResults/FilterButton.jsx

@@ -1,7 +1,8 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 
-function FilterButton() {
+function FilterButton({handleChange}) {
+
   return (
     <Menu
       as="div"
@@ -34,6 +35,7 @@ function FilterButton() {
                 <div
                   data-testid="language-button-option"
                   aria-hidden="true"
+                  onClick={(e)=>handleChange('newest',e)}
                   className={`${
                     active
                       ? "bg-white text-secondary rounded"
@@ -49,6 +51,7 @@ function FilterButton() {
                 <div
                   data-testid="language-button-option"
                   aria-hidden="true"
+                  onClick={(e)=>handleChange('oldest',e)}
                   className={`${
                     active
                       ? "bg-white text-secondary rounded"

src/components/FilterResults/FilterResults.jsx

@@ -1,9 +1,29 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBookmark } from "@fortawesome/free-regular-svg-icons";
+import { useState } from 'react';
 import FilterButton from "./FilterButton";
 
 function FilterResults({ filterData }) {
-  const jobCard = filterData.map((job) => {
+  const [data, setData] = useState(filterData)
+  const newArray=filterData.map((key)=>(
+      { ...key, date: new Date(key.postingDate)}
+     ))
+
+    //  console.log(newArray)
+
+   const handleChange = (props)=>{
+    // console.log(props)
+    if (props==='newest'){
+        const sortingDataByNewest = newArray.sort((a, b) => b.date - a.date)
+        // console.log('newest data', sortingDataByNewest)
+        setData(sortingDataByNewest)
+    } else{
+      const sortingDataByOldest = newArray.sort((a, b) => a.date - b.date)
+      // console.log('oldest data', sortingDataByOldest)
+      setData(sortingDataByOldest)
+    }}
+
+  const jobCard = data.map((job) => {
     return (
       <div
         key={job.id}
@@ -52,7 +72,7 @@ function FilterResults({ filterData }) {
           </span>
           Results
         </h2>
-        <FilterButton />
+        <FilterButton handleChange={handleChange}/>
       </div>
       {jobCard}
     </div>