How I can access the values from a form made via Reactbootstrap when a user clicks submit button, am I unable to grab the values

Question

This is the code I am currently working with. So what is the way to collect the values from Form? In the submitHandler, how can I see the values from email,query,and fullName. I am accustomed to onChange way but is there a way to grab the values solely using onSubmitHandler ?

import React, { Fragment, FormEventHandler } from 'react';
import { Form } from 'react-bootstrap';
import { Button } from '../../../components';

const ContactForm = () => {

  const submitHandler: FormEventHandler = (event) => {
    event.preventDefault();
    event.persist();
  };

  return (
    <Fragment>
      <h1>Reach out to us !</h1>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId="formGridEmail">
          <Form.Label>Full Name</Form.Label>
          <Form.Control placeholder="Peter Pots" />
        </Form.Group>
        <Form.Group controlId="formGridPassword">
          <Form.Label>Your Email</Form.Label>
          <Form.Control type="email" placeholder="sample@something.com" />
        </Form.Group>
        <Form.Group controlId="formGridQuery">
          <Form.Label>Query</Form.Label>
          <Form.Control as="textarea" rows={3} placeholder="Peter Pots" />
        </Form.Group>
        <Button variant="primary" type="submit" icon="arrow-circle-right">
          Submit
        </Button>
      </Form>
    </Fragment>
  );
};

export default ContactForm;

Thanks in Advance :)

Answer 1

To do this you should use FormData object. You have to pass there form from event.target.

const handleSubmit = (event) => {
    event.preventDefault();

    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      return;
    }
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    console.dir(data);
    push your data somewhere...
};

You will see object with properties named like your form controls with values inside your form.

<Form onSubmit={handleSubmit}>
  <Row className="mb-2">
    <Col md="3">
      <Form.Group controlId="fromItem1">
        <Form.Label>Form item 1</Form.Label>
        <Form.Control
          name="name1"
          required
          type="number"
          placeholder="Enter data"
          defaultValue={defaultValue1}
        />
      </Form.Group>
    </Col>
    <Col md="3">
      <Form.Group controlId="formItem2">
        <Form.Label>Form Item 2</Form.Label>
        <Form.Control
          name="name2"
          required
          type="number"
          placeholder="Enter data"
          defaultValue={defaultValue2}
        />
      </Form.Group>
    </Col>
    ...
    <Col md="3">
      <Button type="submit">Submit</Button>
    </Col>
  </Row>
</Form>

Hope it helps!

Answer 2

You need add attribute name with unique names to Form.Control components:

import React, { Fragment, FormEventHandler,  } from 'react';
import { Form } from 'react-bootstrap';
import { Button } from '../../../components';

const ContactForm = () => {

  const [values, setValues] = useState({});

  const onFormChange = (e, updatedAt) => {
    const name = e.target.name;
    const value = e.target.value;
    setValues({ ...values, [name]: value });
    console.log(name, value);
  };

  const submitHandler: FormEventHandler = (event) => {
    event.preventDefault();
    event.persist();
    console.log('push data somewhere :)')
    console.log(values);
  };

  return (
    <Fragment>
      <h1>Reach out to us !</h1>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId="formGridEmail">
          <Form.Label>Full Name</Form.Label>
          <Form.Control name="full_name" onChange={onFormChange} placeholder="Peter Pots" />
        </Form.Group>
        <Form.Group controlId="formGridPassword">
          <Form.Label>Your Email</Form.Label>
          <Form.Control type="email" name="email" onChange={onFormChange} placeholder="sample@something.com" />
        </Form.Group>
        <Form.Group controlId="formGridQuery">
          <Form.Label>Query</Form.Label>
          <Form.Control as="textarea" name="query" onChange={onFormChange} rows={3} placeholder="Peter Pots" />
        </Form.Group>
        <Button variant="primary" type="submit" icon="arrow-circle-right">
          Submit
        </Button>
      </Form>
    </Fragment>
  );
};

export default ContactForm;