Submitting data to Firestore from formik in react

Question

I'm trying to figure out how to submit form data to firestore from a formik form in a react app.

I've used this tutorial to try to learn how to make the form and then tried to add the firebase form submission to the submit handler.

The form has:

    import React, { useState } from 'react';
    import { Link  } from 'react-router-dom';
    import firebase from '../../../../firebase';
//  import firestore from '../../../../firebase';
    import { withStyles } from '@material-ui/core/styles';
    import TextField from '@material-ui/core/TextField';
    import Button from '@material-ui/core/Button';
    import Dialog from '@material-ui/core/Dialog';
    import DialogActions from '@material-ui/core/DialogActions';
    import DialogContent from '@material-ui/core/DialogContent';
    import DialogContentText from '@material-ui/core/DialogContentText';
    import DialogTitle from '@material-ui/core/DialogTitle';
    // import axios from 'axios';
    import {
      Formik, Form, Field, ErrorMessage,
    } from 'formik';
    import * as Yup from 'yup';
    // import { DisplayFormikState } from './formikHelper';
    
    const styles = {
    
    };
    




function Contact(props) {
  const { classes } = props;
  const [open, setOpen] = useState(false);
  const [isSubmitionCompleted, setSubmitionCompleted] = useState(false);
  
  function handleClose() {
    setOpen(false);
  }

  function handleClickOpen() {
    setSubmitionCompleted(false);
    setOpen(true);
  }

  return (
    <React.Fragment>
        <Link
            // component="button"
            className="footerlinks"
            onClick={handleClickOpen}
        >
            Contact
        </Link>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        {!isSubmitionCompleted &&
          <React.Fragment>
            <DialogTitle id="form-dialog-title">Contact Us</DialogTitle>
            <DialogContent>
              <DialogContentText>
                Thanks for your interest.
              </DialogContentText>
              <Formik
                initialValues={{ email: '', name: '', comment: '' }}
                onSubmit={(values, { setSubmitting }) => {
                   setSubmitting(true);
                   firebase.firestore.collection("contact").doc.set({
                    name: "name",
                    email: "email",
                    comment: "comment"
                })
                //   axios.post(contactFormEndpoint,
                //     values,
                //     {
                //       headers: {
                //         'Access-Control-Allow-Origin': '*',
                //         'Content-Type': 'application/json',
                //       }
                //     },
                  .then(() => {
                    setSubmitionCompleted(true);
                  });
                }}

                validationSchema={Yup.object().shape({
                  email: Yup.string()
                    .email()
                    .required('Required'),
                  name: Yup.string()
                    .required('Required'),
                  comment: Yup.string()
                    .required('Required'),
                })}
              >
                {(props) => {
                  const {
                    values,
                    touched,
                    errors,
                    dirty,
                    isSubmitting,
                    handleChange,
                    handleBlur,
                    handleSubmit,
                    handleReset,
                  } = props;
                  return (
                    <form onSubmit={handleSubmit}>
                      <TextField
                        label="Name"
                        name="name"
                        className={classes.textField}
                        value={values.name}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        helperText={(errors.name && touched.name) && errors.name}
                        margin="normal"
                        style={{ width: "100%"}}
                      />

                      <TextField
                        error={errors.email && touched.email}
                        label="Email"
                        name="email"
                        className={classes.textField}
                        value={values.email}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        helperText={(errors.email && touched.email) && errors.email}
                        margin="normal"
                        style={{ width: "100%"}}
                      />

                      <TextField
                        label="Let us know how we can help"
                        name="comment"
                        className={classes.textField}
                        multiline
                        rows={4}
                        value={values.comment}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        helperText={(errors.comment && touched.comment) && errors.comment}
                        margin="normal"
                        style={{ width: "100%"}}
                      />
                      <DialogActions>
                        <Button
                          type="button"
                          className="outline"
                          onClick={handleReset}
                          disabled={!dirty || isSubmitting}
                        >
                          Reset
                        </Button>
                        <Button type="submit" disabled={isSubmitting}>
                          Submit
                        </Button>
                        {/* <DisplayFormikState {...props} /> */}
                      </DialogActions>
                    </form>
                  );
                }}
              </Formik>
            </DialogContent>
          </React.Fragment>
        }
        {isSubmitionCompleted &&
          <React.Fragment>
            <DialogTitle id="form-dialog-title">Thanks!</DialogTitle>
            <DialogContent>
              <DialogContentText>
                Thanks
              </DialogContentText>
              <DialogActions>
                <Button
                  type="button"
                  className="outline"
                  onClick={handleClose}
                >
                  Back to app
                  </Button>
                {/* <DisplayFormikState {...props} /> */}
              </DialogActions>
            </DialogContent>
          </React.Fragment>}
      </Dialog>
    </React.Fragment>
  );
}

export default withStyles(styles)(Contact);

The firestore config file has:

When I try this, I get a warning in the console when I press submit (no error messages and the form just hangs with data that I entered in the form.

instrument.ts:129 Warning: An unhandled error was caught from submitForm() TypeError: firebase__WEBPACK_IMPORTED_MODULE_2_.default.firestore.collection is not a function

Note, I've dried both .doc.set and .doc.add in the firestore method - neither works.

Answer 1

Found it eventually -the doc has to be doc()