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