[React] Simplify and Convert a Traditional React Form to Formik

Forms in React are not easy. T

render() {
    return (
      <React.Fragment>
        <h2>Regular Maintenance:</h2>
        <ItemList items={this.state.items} />
        <Formik
          onSubmit={values => {
            this.setState(prevState => ({
              items: [...prevState.items, values.item]
            }));
          }}
        >
          <Form>
            <label htmlFor="name">Item:</label>
            <Field type="text" name="item" />
            <button type="submit">Add Item</button>
          </Form>
        </Formik>
      </React.Fragment>
    );
  }

 

 

hey are verbose and several lines of code. However, forms with Formik are much simpler. Formik maintains the state of inputs and simplifies the form so you can work quicker!