How to populate table row information into a modal? - reactjs

Question

I am building a contact list to try to learn React. The API data is populating into my table. I want to be able to edit the contact information if needed. My question is how do I get the table row to populate into a form that spawns in a Modal after a button is clicked? There is so much out there that I would like to know the best approach for what I have created.
This is the page that comes up with the table in it:
const [show, setShow] = useState(false);
const handleClose = () = setShow(false);
const handleShow = () = setShow(true);
return (
<>
<Table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email </td>
<td>Phone</td>
</tr>
</thead>
<tbody>
{data.map((results, index) => (
<tr key={index}>
<td>{results.first_name}</td>
<td>{results.last_name}</td>
<td>{results.email}</td>
<td>{results.phone_number}</td>
<td>
<Button variant="warning" onClick={handleShow}>Edit</Button>
</td>
</tr>
))}
</tbody>
</Table>
<Modal className="edit" show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Contact</Modal.Title>
</Modal.Header>
<Modal.Body>
{<Contact_Form />}
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={}>Delete</Button>
<Button variant="primary" onClicke={}>Update</Button>
</Modal.Footer>
</Modal>
</>
);
And this is the form that spawns in the modal when clicked. This is in a different file than the one above.
function Contact_Form(){
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col}>
<Form.Label>First Name</Form.Label>
<Form.Control placeholder="" />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Last Name</Form.Label>
<Form.Control placeholder="" />
</Form.Group>
</Row>
<Form.Group className="mb-3">
<Form.Label>Email</Form.Label>
<Form.Control placeholder="someone#example.com" />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Phone Number</Form.Label>
<Form.Control placeholder="(XXX) XXX-XXXX" />
</Form.Group>
</Form>
);
}
export default Contact_Form;
What am I missing? Does my contact_form need to be in the same file?
I have looked through multiple solutions, but none seem to work with what I have created. I would like a nudge in the right direction.

Answer 1

You could use another state that holds the selected result data, and pass it as a prop to the Contact_Form:
const [selected, setSelected] = useState(null);
const handleShow = (results) => {
setSelected(results);
setShow(true);
};
return (
...
<tbody>
{data.map((results, index) => (
<tr key={index}>
<td>{results.first_name}</td>
<td>{results.last_name}</td>
<td>{results.email}</td>
<td>{results.phone_number}</td>
<td>
<Button variant="warning" onClick={() => handleShow(results)}>Edit</Button>
</td>
</tr>
))}
</tbody>
...
<Modal className="edit" show={show} onHide={handleClose}>
...
<Modal.Body>
{<Contact_Form data={selected} />}
</Modal.Body>
...
</Modal>
)