[React] Persist Form Data in React and Formik with formik-persist

It can be incredibly frustrating to spend a few minutes filling out a form only to accidentally lose all of your progress by the browser closer, the page refreshing, or many other terrible scenarios. formik-persist saves you from that fate by providing a Persist component which you can drop inside of any Formik Form to save the state of the form into localStorage. This lesson walks you through creating the Form and using the Formik Persist component.

import React, { Component } from "react"
import "./App.css"
import { Formik, Form, Field } from "formik"
import { Persist } from "formik-persist"

class App extends Component {
  state = {
    firstName: "",
    lastName: ""
  }

  render() {
    return (
      <>
        <Formik onSubmit={values => this.setState(values)}>
          {props => (
            <Form style={{ display: "flex", flexDirection: "column" }}>
              <label htmlFor="firstName">First Name</label>
              <Field id="firstName" name="firstName" />
              <label htmlFor="lastName">Last Name</label>
              <Field id="lastName" name="lastName" />
              <button type="submit">Submit</button>
              <Persist name="person-form" />
            </Form>
          )}
        </Formik>
        {JSON.stringify(this.state)}
      </>
    )
  }
}

export default App