React Modal Component Using Functional Hooks - reactjs

Question

I am working on an app that requires a modal component, this component is currently encompassed with three props that are passed to callback three different modals in the app structure. What I need to achieve is when a button is clicked for the specific modal, add a unique class to the modal wrapper that will identify each modal when clicked, thus manipulating the css with selectors for those modals.
see below:
const NWmodal = (props) => {
return (
<Modal>
<Modalmain data-modal-type="this should pass in a unique id to its modal once button is clicked">
<div>
{props.ejectModal}
</div>
<div>
{props.timeModal}
</div>
<div>
{props.leaveModal}
</div>
<Close>
x
</Close>
</Modalmain>
</Modal>
);
}
<NWmodal
id="timeModal"
timeModal={<NWtimeModal/>} (callback for timemodal component)
/>
<NWmodal
id="leaveModal"
leaveModal={<NWleaveModal/>} (callback for leavemodal component)
/>
<NWmodal
id="ejectModal"
leaveModal={<NWejectModal/>} (callback for ejectmodal component)
/>
function Nav() {
return (
<ul>
<li>
<button
href="javascript:void(0)"
data-modal="timeModal"
onClick={event}>
Time Modal
</button>
</li>
<li>
<button
href="javascript:void(0)"
data-modal="leaveModal"
onClick={event}>
Leave Modal
</button>
</li>
<li>
<button
href="javascript:void(0)"
data-modal="ejectModal"
onClick={event}>
Eject Modal
</button>
</li>
</ul>
);
}

Answer 1

As a disclaimer: I'm still learning this React thing, but the approach I would likely take...
The useRef hook can be used to create variables, which may then in turn be associated with your modals as a reference. eg:
const ejectModalRef = useRef()
<NWmodal id="ejectModal" ref={ejectModalRef} />
The node will be accessible in the onClick JS code as 'ejectModalRef.current'.
(Don't forget to import useRef eg.: import React, { useRef } from "react";
HTH