How to use formik along with a stateful react component - reactjs

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 = "test#gmail.com";
employeeData.firstName = "Luis";
employeeData.middleName = "John";
employeeData.lastName = "Nakano";
employeeData.phone = "1112223333";
employeeData.city = "Dallas";
return employeeData;
}
Appreciate your help.
Thanks

Answer 1

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.