How to populate table row information into a modal?

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.

Edit:

I have added props to the Contact_Form like this. Now it retrieves all results instead of just the table row.

function Contact_Form(props){
    return (
        <Form>
            <Row className="mb-3">
                <Form.Group as={Col}>
                    <Form.Label>First Name</Form.Label>
                    <Form.Control value={props.first_name}  placeholder="" />
                </Form.Group>

                <Form.Group as={Col}>
                    <Form.Label>Last Name</Form.Label>
                    <Form.Control value={props.last_name}  placeholder="" />
                </Form.Group>

            </Row>

            <Form.Group className="mb-3">
                <Form.Label>Email</Form.Label>
                <Form.Control value={props.email}  placeholder="someone@example.com" />
            </Form.Group>

            <Form.Group className="mb-3">
                <Form.Label>Phone Number</Form.Label>
                <Form.Control value={props.phone} placeholder="(XXX) XXX-XXXX" />
            </Form.Group>

        </Form>
    );
}

export default Contact_Form;

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>
)