How to use formik along with a stateful react component

Question

I have just started learning reactjs. I came across formik and yup while searching for form validation. Most of the examples that i have gone through so far are talking about stateless components. So I would like to know how can I use formik and yup in a stateful component?

I have got a simple employee details form with email,first name, last name, phone and city. The data for the form is loaded from the database. Once the data is loaded, then user can edit and save it to db. Could you please help me to add formik and yup into my project by adding validation for all my above fields? My Code is also present here https://codesandbox.io/s/l26rqyx6j7

My form is given below EmpJobDetailsForm.js

import React from "react";
import { getEmpDetails } from "./APIUtils";
import { withFormik, Form, Field } from "formik";
import Yup from "yup";

class EmpJobDetailsForm extends React.Component {
  state = {
    data: {}
  };

  componentWillMount() {
    this.getData();
  }

  getData = () => {
    let response = getEmpDetails();
    this.setState({ data: response });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label htmlFor="email">Email</label>
            <input type="email" name="email" value={this.state.data.email} />
          </div>
          <div>
            <label htmlFor="firstName">First Name</label>
            <input
              type="text"
              name="firstName"
              value={this.state.data.firstName}
            />
          </div>
          <div>
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              name="lastName"
              value={this.state.data.lastName}
            />
          </div>
          <div>
            <label htmlFor="phone">Phone</label>
            <input type="text" name="phone" value={this.state.data.phone} />
          </div>
          <div>
            <label htmlFor="city">City</label>
            <input type="text" name="city" value={this.state.data.city} />
          </div>
          <div>
            <button type="button" className="outline">
              Reset
            </button>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
    );
  }
}
export default EmpJobDetailsForm;

I have a simple APIUtils.js. It is very basic and i will add code to fetch data from db here.

export function getEmpDetails() {
  var employeeData = {};
  employeeData.email = "[email protected]";
  employeeData.firstName = "Luis";
  employeeData.middleName = "John";
  employeeData.lastName = "Nakano";
  employeeData.phone = "1112223333";
  employeeData.city = "Dallas";
  return employeeData;
}

Appreciate your help.

Thanks

tcollart · Accepted Answer · 2018-11-06 11:13:38Z

0

Formik is stateful, it's first goal is to "Getting values in and out of form state" (without using Redux-Form).

A cleaner way to do this would be to use a Formik form and to add your fetched data as initalValues (but first remove all the value attributes from your current inputs).

You can also take a look at the 'withFormik' higher-order component and particularly the mapsPropsToValues option.

answered Nov 6, 2018 at 11:13

tcollart

1,0722 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use formik along with a stateful react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related