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

[Bas van Dinther]

How can I get the values from the form to submit them? And how can I set the value to the state if it has been fetched from the database like I would do in a normal form:

<TextField
id={'name'}
label={'Username'}
name={'name'}
type={'text'}
style={width}
autoComplete={'username'}
value={this.state.name}
onChange={this.handleChange}
/>


[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.

[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 possible use state.

create state values

this.state={
username:''
}

then in your componentdidmount or where ever you make your database calls you can setstate of that value.

componentdidmount(){
//database call
this.setState({username: databaseUsername})
}

then pass it to the Formik's initialValues prop

render(){
const {username} = this.state

const values = {username: username}

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

)
}

Link to demo