LeadListWithModals using useState()

LeadListWithRevisionAndTrackingModals.js

import React, { useState } from 'react';

const LeadListWithModals = ({ leads }) => {
  const [isRevisionModalOpen, setRevisionModalOpen] = useState(false);
  const [leadInRevision, setLeadInRevision] = useState(null);
  
  const [newStatus, setNewStatus] = useState(null);
  const [isTrackingModalOpen, setTrackingModalOpen] = useState(false);
  const [trackingLead, setTrackingLead] = useState(null);

  const handleRevisionRequest = (lead) => {
    setLeadInRevision(lead);
    setRevisionModalOpen(!isRevisionModalOpen);
  };
  
  const handleLeadStatusChange = (lead, value) => {
    setTrackingLead(lead);
    setNewStatus(value);
    setTrackingModalOpen(!isTrackingModalOpen);
  };
  
  return (
    <>
      <LeadList
        leads={leads}
        onRevisionRequest={handleRevisionRequest}
        onStatusChange={handleLeadStatusChange}
      />
      {leadInRevision ? (
        <RevisionModal
          onToggle={() => { setRevisionModalOpen(!isRevisionModalOpen); }}
          isOpen={isRevisionModalOpen}
          lead={leadInRevision}
        />
      ) : null}
      {trackingLead ? (
        <TrackingModal
          onToggle={() => { setTrackingModalOpen(); }}
          isOpen={isTrackingModalOpen}
          lead={trackingLead}
          selectValue={newStatus}
        />
      ) : null}
    </>
  );
};
export default LeadListWithModals;