Discussion on: React Form using Formik, Material-UI and Yup.

[Oghenero Adaware]

How can I get the values from the form to submit them?

pass a submit function to formik onSubmit prop.

// submit function
submitValues = ({ name, email, confirmPassword, password }) => {
    console.log({ name, email, confirmPassword, password });
  };

    <Formik
              render={props => <Form {...props} />}
              initialValues={values}
              validationSchema={validationSchema}
              onSubmit={this.submitValues}
            />

Formik then provides you with a handleSubmit prop which you use to handle submit in your form.

 <form onSubmit={handleSubmit}>
......

</form>

handleSubmit basically passes all the values in your form to the submit function you passed to onSubmit

how can I set the value to the state if it has been fetched from the database.

I didn't use state for my initial values in the article but it's use state.

this.state={
name:"",
email:""
}

then in your componentdidmount you can do your database call then setstate and then pass the state values to Formik initialValues prop.

Link to Demo

[Bas van Dinther]

Thanks for your quick reply. But what if I load the email and username from the state. How can I disable the touched option on those input fields? Because they don't have to be changed everytime but my button keeps disabled.

I tried some things like checking if the state is set and if its set then: this.props.setFieldTouched('email', true, false); but that doesn't seem to work.

[Bas van Dinther]

Could you please provide me more info about the function to check if the field is touched? So I can try to modify it myself?

[Oghenero Adaware]

Sorry I have be busy recently, Right now I don't think formik has any apis to check if a field is touched.