React use a form in a modal to pass the inputted data to a function

Question

I am using react-bootstrap/Modal and react-hook-form. I want the user to insert data in the input which after submitting will go to the function where I want to make an object with it.

<form onSubmit={handleSubmit(update)}>
                        <Modal show={show} onHide={handleClose}>
                            <Modal.Header closeButton>
                                <Modal.Title>Edit</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <label>Description</label>
                                <input name="message" type="text" ref={register} placeholder="description"/>
                            </Modal.Body>
                            <Modal.Footer>
                                <button variant="secondary" onClick={handleClose}>
                                    Cancel
                                </button>
                                <button type="submit" variant="primary" onClick={update}>
                                    Edit
                                </button>
                            </Modal.Footer>
                        </Modal>
                    </form>



//I will need the async function later to await an api call.
const update = (data) => {
        (async () => {
            console.log("data", data)
        })()
    }

Thanks for helping!

EDIT:

I found the solution, I had to put the form in the modal but outside the modal components.

<Modal show={show} onHide={handleClose}>
    <form onSubmit={handleSubmit(update)}>
        <Modal.Header closeButton>
            <Modal.Title>Edit</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <label>Description</label>
            <input name="message" type="text" placeholder="description" />
        </Modal.Body>
        <Modal.Footer>
            <button variant="secondary" onClick={handleClose}>
                Cancel
            </button>
            <button type="submit" variant="primary" onClick={update}>
                Edit
            </button>
        </Modal.Footer>
    </form>
</Modal>

Answer 1

Since you are using the react-hook-forms, simply can get the result after form submission.

The result object looks like this in your case: {message: "some message data"}

So, you need to get the "message" property of data parameter on update function.

Note: you pass message as the name property of your input element so the data.message will give you the corresponding data on input element which is controlled by react-hook-forms

const update = (data) => {
        (async () => {
            console.log("data", data.message)
        })()
    }