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

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;