Submitting Formik form data to firebase database in react

Question

I am trying to figure out how to send form data form a Formik form to a Firebase database in my react app.

I have a form as follows:

import React from 'react'
import { Link } from 'react-router-dom'

// import { Formik } from 'formik'
import { Formik, Form, Field, ErrorMessage, withFormik } from 'formik';
import * as Yup from 'yup';

import { Badge, Button, Col, Feedback, FormControl, FormGroup, FormLabel, InputGroup } from 'react-bootstrap';
import Select from 'react-select';
import firebase from '../../../firebase';

const style1 = {
    width: '60%',
    margin: 'auto'
}

const style2 = {
    paddingTop: '2em',
}

const style3 = {
    marginRight: '2em'
}

const style4 = {
    display: 'inline-block'
}

const options = [
    { value: 'author', label: 'Author' },
    { value: 'reviewer', label: 'Reviewer' },

  ];
class Basic extends React.Component {

  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

        return (
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    selectedOption: null

                }}

                validationSchema={Yup.object().shape({
                    firstName: Yup.string()
                        .required('First Name is required'),
                    lastName: Yup.string()
                        .required('Last Name is required'),
                    email: Yup.string()
                        .email('Email is invalid')
                        .required('Email is required'),
                    selectedOption: Yup.string()
                        .required('It will help us get started if we know a little about your background'),    
                    password: Yup.string()
                        .min(6, 'Password must be at least 6 characters')
                        .required('Password is required'),
                    confirmPassword:  Yup.string()
                        .oneOf([Yup.ref('password'), null], 'Passwords must match')
                        .required('Confirm Password is required')
                })}

                // onSubmit={fields => {
                //     alert('SUCCESS!! :-)\n\n' + JSON.stringify(fields, null, 5))
                // }}

                // onSubmit={handleSubmit}

                render={({ errors, status, touched }) => (

                    <Form style={style1}>

                    <h1 style={style2}>Get Started</h1>

                        <div className="form-group">
                            <label htmlFor="firstName">First Name</label>
                            <Field name="firstName" type="text" className={'form-control' + (errors.firstName && touched.firstName ? ' is-invalid' : '')} />
                            <ErrorMessage name="firstName" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="lastName">Last Name</label>
                            <Field name="lastName" type="text" className={'form-control' + (errors.lastName && touched.lastName ? ' is-invalid' : '')} />
                            <ErrorMessage name="lastName" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="email">Email</label>
                            <Field name="email" type="text" placeholder="Please use your work email address" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
                            <ErrorMessage name="email" component="div" className="invalid-feedback" />
                        </div>


                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
                            <ErrorMessage name="password" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="confirmPassword">Confirm Password</label>
                            <Field name="confirmPassword" type="password" className={'form-control' + (errors.confirmPassword && touched.confirmPassword ? ' is-invalid' : '')} />
                            <ErrorMessage name="confirmPassword" component="div" className="invalid-feedback" />
                        </div>

                        <div className="form-group">
                        <label htmlFor="selectedOption">Which role best describes yours?</label>

                        <Select
                            value={selectedOption}
                            onChange={this.handleChange}
                            options={options}
                        />
                        </div>
                        <div className="form-group" >
                            <label  htmlFor="consent">By registering you accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>

                        </div>


                        <div className="form-group">
                            <Button variant="outline-primary" type="submit" style={style3} id="submitRegistration">Register</Button>
                        </div>
                    </Form>
                )}
            />

    );
  }
}

export default Basic; 

I have a database in firebase (cloud firestore) with a collection called Registrations that has fields named the same as each of these form fields.

I have spent the day following tutorials that seem to be made for react before Formik. There's not much point to showing all the things I've tried and failed at for the day - they're clearly not written with Formik in mind. I can't find a way to write the onSubmit so that Formik can give the data to Firebase.

Has anyone found a current tutorial or know how to do this?

Answer 1

I've used Formik and Firebase in this Open-Source React project. Maybe this is what you're looking for :)

Expertizo React Native Kit