How to use formik along with a stateful react component











up vote
1
down vote

favorite
1












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










share|improve this question


























    up vote
    1
    down vote

    favorite
    1












    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










    share|improve this question
























      up vote
      1
      down vote

      favorite
      1









      up vote
      1
      down vote

      favorite
      1






      1





      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










      share|improve this 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







      reactjs formik yup






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 5 at 2:08









      Shawn

      284




      284
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          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.






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53147433%2fhow-to-use-formik-along-with-a-stateful-react-component%23new-answer', 'question_page');
            }
            );

            Post as a guest
































            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            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.






            share|improve this answer

























              up vote
              0
              down vote













              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.






              share|improve this answer























                up vote
                0
                down vote










                up vote
                0
                down vote









                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.






                share|improve this answer












                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 2 days ago









                tcollart

                78921024




                78921024






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53147433%2fhow-to-use-formik-along-with-a-stateful-react-component%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest




















































































                    這個網誌中的熱門文章

                    Xamarin.form Move up view when keyboard appear

                    Post-Redirect-Get with Spring WebFlux and Thymeleaf

                    Anylogic : not able to use stopDelay()