React Formik Tutorial - 20 - Nested Objects

📱 Follow Codevolution

Nested Objects in React with Formik

[BlackMarq]

Man I was waiting for like 4 videos for you to fix that typo, glad you got it :)!

[Steve-Ariss]

This has been a great series - and this video came just in time! Was about to tackle a problem that will be solved with nested objects. Thanks!

[habib]

143 like & 0 dislike. That's prove your quality of content.. great job @codevolution

[zahlen_]

it's funny that that "commenst" stuck haha, that aside, this series has been great help!

[rahulshimpi]

Great job bro. I am a beginner to react and watch this series now I am so confident in form creation. Thank you so much.

[supindersingh]

Great video. But what about yup validation for nested objects?

[yossisternlicht]

If you want to validate the nested object, you can do something like this.

const validationSchema = Yup.object(
{
name: Yup.string().required("Required"),
email: Yup.string().email("Please provide a valid email address").required("Required"),
channel: Yup.string()required("Required"),
address: Yup.string().required("Required"),
social: Yup.object().shape({

twitter: Yup.string().required("Required"),
facebook:
})

}
);

[susantadas]

how can I validate the nested object with useFormik hook

[AMMARYASIR]

What if I want to useFormik hook rather than Formik component
How can I immplement nested obj ?

[veerendhar]

Plz cover context api and react testing library in dept

[tyasindu]

please make a tutorial on react router. It's a request

[lavagandhi]

how to add nested object in validationSchema

[Finn-jppn]

Hi. Has anyone tried to use ErrorMessage for the nested fields?

I cannot seem to access if I follow the below approach
<ErrorMessage name='social.facebook' component={TextError} />

The render-props approach seems to work
<div className='form-control'>
<label htmlFor='twitter'>Twitter profile</label>
<Field type='text' id='twitter' name='social.twitter' />
</div>
<ErrorMessage name='social.twitter'>
{(errorMsg) => {
return <TextError errorMsg={errorMsg} />;
}}
</ErrorMessage>

[gustavoduarte]

we could to make a google meet ? i have a doubt..later i will pay a coffee to you

[snakeb]

great video but what about when youre using the helper function. when I try to do something like validateField('social.facebook'), it throws a weird error

[shahnawazvhora]

how to solve formik yup nested object validation???