react redux - showing the applicants of a job in reactjs using id

Question

Iam trying to make a react application whereby users are applying for a job and also creating a report that will show the profile of the users who have applied for the job. Iam welcome to any ideas that can be given to me since I would like to have a logic on how to implement that.

Here is my code below: DriverCard.js

import React from "react";
import member2 from "../../../dist/images/user2.png";

const DriverCard = ({cardValues}) => {
  return (
    <>
      <div className="col-lg-3 col-md-3 col-sm-4 col-6 p-0 mb-5">
        <div className="text-center">
          <div className="mb-2">
            <img
              src={cardValues ? `${cardValues.location.title}` : member2}
              className="rounded-circle"
              height="85px"
              width="85px"
              alt="members"
            />
          </div>
          <h6 className="mb-0 textHeading">
            {cardValues ? cardValues.name : `John Doe`}
          </h6>
          <span className="text-muted textStyle"> @JohntheD &nbsp; 5h</span>
          <hr
            style={{
              width: "50%",
              marginTop: 4,
              marginBottom: 1,
            }}
          />
          <h6 className="textStyle mt-1">
            {cardValues ? `${cardValues.licenseAge} +years licence` : `NA`}
          </h6>
          <h6 className="textStyle">
            {cardValues ? `${cardValues.experience} +years experience` : `NA`}
          </h6>
        </div>
      </div>
    </>
  );
};

export default DriverCard;

This is the report file that is suppossed to show the jobcard and the profile for the applicants.

import React, { useEffect, useState } from "react";
import {useHistory} from "react-router-dom";
import map from "lodash/map"
import { getSpecificJobCard } from "../../Api/index";
import arrowBack from "../../dist/images/arrowBack.svg";
import DriverCard from "./Job_Components/DriverCard";
import JobCardDetails from "./Job_Components/JobCardDetails";
import NextPageButtons from "../Main/DashBoard_Buttons/NextPageButtons";

const JobDetails = ({jobpostId}) => {
  const [jobCard, setjobCard] = useState([]);

  const history = useHistory();
  console.log("param val",jobpostId);

  useEffect(() => {
    (async () => {
      let jobCardRespData = await getSpecificJobCard(jobpostId);
      setjobCard(jobCardRespData);
      console.log("jobcard response:", jobCardRespData);
    })();
  }, []);

  console.log("resp list ----- ", jobCard);

  return (
    <div className="">
      <div className="col-md-10 m-auto">
        <span style={{ cursor: "pointer" }} className="">
          <img src={arrowBack} alt="" className="img-fluid" />
        </span>
        <div className="row">
          <div className="col-lg-4 mt-5">
            <div className="row">
              {}
              <JobCardDetails job={jobCard} />
            </div>
          </div>
          <div className="col-lg-8 mt-5">
            <div className="row">
              <DriverCard/>
              {/* <DriverCard /> */}
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-lg-12">
            <div className="row">
            </div>
          </div>
        </div>
      </div>
      <div className="col-lg-12 my-3 border-top">
        <NextPageButtons/>
      </div>
    </div>
  );
};

export default JobDetails;

question from:https://stackoverflow.com/questions/65917936/showing-the-applicants-of-a-job-in-reactjs-using-id

Answer 1

Waitting for answers