Handling Complex Multiple Input Form States in React [2 LINES ONLY]

🤩Access My Complete React Course:- www.udemy.com/course/the-ulti...
🗒️MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
🚀Access REDUX Course:- www.udemy.com/course/the-ulti...
Learn How to handle complex Multiple Input Form in React JS using useState in JUST 2 LINES. This trick will help you a lot when you are dealing with Signup form, Login form or any other forms in React.
IMPORTANT TUTORIALS
React Hooks Playlist : • React Hooks Tutorial i...
useState Hook : • useState in React | us...
useEffect Hook : • useEffect React Hook |...
COPYRIGHT FOOTAGES
Video by Pressmaster: www.pexels.com/video/man-work...
Video by Alena Darmel: www.pexels.com/video/a-proble...
Video by Edmond Dantès: www.pexels.com/video/woman-bu...
Social Media Links:
🚀COURSES : www.udemy.com/user/code-bless...
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
Tags
react hooks,react hook form,hooks in react js,react form,react hooks tutorial,react forms,react hook forms react native,react multi inputa,react forms hook,react input fields,react complex state,react forms tutorial,get data from input react,react multi input forms hook,react js forms with hooks,react js handle form and input data,react js handle form data,react forms with hooks,input data react,react js forms tutorial,react js,react

[@shekharsunuwar2873]

This is what i searched for. Clean & simple Keep it up bro.

[@CodeBlessYou]

Thanks for Feedback😀

[@rajasekhar5135]

By seeing this vedio i blindly gone to udemy and purchaased ur vedio Reactjs hope you don't disapoint me

[@CodeBlessYou]

I try my best to create this course. I hope you don't get disappoint.

[@nech7786]

Amazing! Love videos like this, well edited, great pronunciation, clear, short and concise. Just what I needed. Keep at it! THANKS!

[@CodeBlessYou]

Thank you so much for your support and feedback. Grateful for that😇❤

[@funguy2627]

hey this is one of the best and clean explaination. Subbed. No fluff straight to the point and clear. Thanks so much :)

[@CodeBlessYou]

Thank you so much for your support. Really grateful for that😇❤

[@saikumar7247]

but the input values are not removing its stii there

[@tekskilldev8310]

Excellent, you have a great future in teaching. Please continue teaching and making more such videos. Appreciated.

[@CodeBlessYou]

Thank you so much for this comment.. I will never stop teaching😇❤

[@blackman0715]

Wow , Now I could understand the react concept. It is really very helpful for me. Thank you very much bro.

[@CodeBlessYou]

Thank you for your support ❤️😇

[@barbaralaplaca]

Amazing! I searched for this solution for so long!

[@CodeBlessYou]

Thanks for your support❤❤

[@homesteadercats4465]

Thank you! You are a great teacher. You made this click for me when I was struggling.

[@CodeBlessYou]

Made my day❤❤❤

[@codecandyhub]

Thanks man, very concise and clear, keep it up👏👏

[@CodeBlessYou]

Thank you for your support 😍😇

[@petrusmattiasdughem1899]

Great video! Ive been tinkering with this for way too long.

[@CodeBlessYou]

Great to hear!😇❤

[@anjanhr1614]

Thank you soooooo sooooo much for this video. i'm exactly looking for this functionality.

[@CodeBlessYou]

Welcome and thanks for your support😇❤❤

[@billselznick586]

I was struggling with implementing useState. This video perfectly explained everything I didn't understand. 👍

[@CodeBlessYou]

❤❤❤

[@ananthaviswanadhan]

Good one :) To clear values after form submission, make the state as null below after handling submission but inside the same function setDetails({ name:" " email:" " password:" " address:" ") also add a value attribute to input type and pass the properties of the object value = {details.name} and so and so

[@civilpeconstruction1270]

thank you! was wondering that

[@dabbarnaresh7791]

Any other way, I have lot of input fields, above 50

[@0jhivag]

@@dabbarnaresh7791 I have 10 and I made a separate use-input,with this code and moved the component in to the Form component and when I want to validate the form, it takes the info even if the form is incomplete. I have 10 inputs and if I complete one of the inputs and submit, it takes the form. I don't want that , plus the error messages for validation disappear after the first completed input and no message appears for the following inputs, regardless of whether I send the empty input.You have the same problem?

[@allanjohn7261]

wow this was simple with detailed explanation thank you

[@CodeBlessYou]

Thanks for Feedback😀

[@madhukesh_gaming_vlogging6300]

Awesome explanation in a sort span of time keep up the good work buddy

[@CodeBlessYou]

Thanks buddy😀

[@poojauppar5785]

To the point and clear explanation of each variable being used specially the event handler part. This is what is required to understand the basic concepts. Thank you 👍

[@CodeBlessYou]

Glad to hear that. If you want to learn React JS from scratch then you can also take my Complete React JS Course 2024❤❤❤ Link - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD

[@adarshsynergy6413]

Most important video very much appreciated thanks for sharing your knowledge on react

[@CodeBlessYou]

Thanks for your comment😀

[@omkarchennuri5515]

Bro till now I watched many videos regarding to react concepts but in this video I found feels like my best friend teaches to me😀

[@CodeBlessYou]

It is True. I am your friend😀❤

[@anitasharma8904]

Really so much helpful without any time wastage like other thank you so much bro ❤ I'm your new subscriber

[@CodeBlessYou]

Thank you so much❤❤ If you like this tutorial then you can try my recently launched React JS course. Link - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD

[@yogi6354]

Gajab bhai, Explained with high simplicity!!

[@CodeBlessYou]

Thanks for your support❤❤

[@baderaw25]

Thank You man, this helped a lot!

[@CodeBlessYou]

Thanks for your support❤❤

[@santiagosuarez8479]

Nice bruh!! Keep up the good work

[@CodeBlessYou]

Thanks a lot brother❤

[@KiranKumar-ik9go]

Bro i wish u a good luck...im soo happy to see this video, i was scratching my head to understand how this works thanks a lot bro

[@CodeBlessYou]

Glad to hear that. Thank you so much❤❤❤

[@CodeBlessYou]

🤩Access My Complete React Course:- www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD 🚀Access My REDUX Course:- www.udemy.com/course/the-ultimate-redux-course-state-management-library/?referralCode=0E6517D629498E1C48D7

[@pawolbeni]

Thank you for the video! great vid.

[@CodeBlessYou]

Thank you so much for your support ❤❤

[@merlinpraks1788]

Nice, thanks. It helped a lot.

[@CodeBlessYou]

Thanks for Comment😇

[@uttamprabhu]

Thanks for clearing my doubt, bro👍

[@CodeBlessYou]

Thanks for your support brother❤❤❤

[@drmarumo]

thank you soooooooooooo you helped me a lot...My GOD BLESS YOU SIR!

[@CodeBlessYou]

My Pleasure Brother😀

[@rifatmahmood7161]

Clean code, Clear explanation 👍

[@CodeBlessYou]

Thanks for this comment😇

[@neetukumari6866]

thank you very very much. And yes SUBSCRIBED!!!!

[@CodeBlessYou]

Thank you so much. Really grateful for that

[@cryptonicchronic8111]

another awesome video thank you!

[@CodeBlessYou]

Thanks for your support😀

[@kaltube4817]

Well Done Brother! Keep it Up🙌🙌

[@CodeBlessYou]

Thanks for this comment❤

[@LovedbyGod4ever]

Very clear and simple bro

[@CodeBlessYou]

Thanks for this comment😀❤

[@iruhamu570]

thanks for making this video !

[@CodeBlessYou]

❤❤❤

[@zeenatfirdoshquadri1699]

I was searching it and was lot confused now it's clear

[@CodeBlessYou]

❤❤

[@kashifullah5370]

Love you broo, really impressive ❤❤

[@CodeBlessYou]

Thanks for this support brother❤❤

[@Hello_VVolf]

such a brilliant, thanks for sharing

[@CodeBlessYou]

😇❤❤

[@0jhivag]

I made a separate use-input component and i use it in the Form component and when I want to validate the form, it takes the info even if the form is incomplete. I have 10 inputs and if I complete one of the inputs and submit it, it takes the form. I don't want that , plus the error messages for validation disappear after the first completed input and no message appears for the following inputs, regardless of whether I send the empty input

[@CodeBlessYou]

You can check my Form validation tutorial if you want for Form validation - kzbin.info/www/bejne/Y6OvfmyqarqAhc0

[@AkashSingh-iq4kw]

great content !! u gained a sub

[@CodeBlessYou]

Glad to hear that ❤❤❤

[@diksonmanganye8997]

Thank you very much man, you awesome 👌

[@CodeBlessYou]

❤❤❤

[@diggerdog001]

U really help me, cause i really stuck on props drilling. I have a complex form structure and i can't figure out how can i do this with one handleClick. Buy i have a question, why we must wrapping 'name' const in "[ ]"?

[@CodeBlessYou]

The reason we have to wrap name variable with [ ] is because our "name" is not a string, it is variable. And If in our object we write {...prev, name: value} then our we name is set to object property. Not a dynamic property. If we wrap our name with [ ] then we can set email field to email value, phone number to phone number value like this. If you are still confused, then try to remove square brackets and see the object in console. You will understand that.Thanks for watching❤❤❤

[@diggerdog001]

thank you @@CodeBlessYou

[@thewebdesigner]

very nice bro..keep it up & upload more on react

[@CodeBlessYou]

Sure I will 😇

[@ichiroutakashima4503]

Great tutorial, better than I expected. However, could you do some tutorials where it's about "Array of Objects" and not single arrays?

[@CodeBlessYou]

Sure I will do that

[@satishmaurya2089]

neat and clean code

[@CodeBlessYou]

❤❤❤

[@Frahane1]

Very great tutorial. How do you set validation form with that ? Would also love to see a login/log out/forgot password (recovery/reset). Thanks. I'm subscribing to see every of tutorials.

[@CodeBlessYou]

Thank you so much for your support ❤️😇 I already uploaded form validation, JWT(for login, logout) on this channel. You can check that😊👍

[@luishenriquescolari2438]

Anyone knows where i can find the "name" of the docs page for the [name]: value "trick", i've never seen this before

[@diggerdog001]

I think it's just pattern

[@rambhaustark6622]

Genius bro, genius

[@CodeBlessYou]

Thanks for your support. Grateful for that❤❤

[@rahulkulkarni9653]

That's what I want thanks bro

[@CodeBlessYou]

😀😀

[@anuragyadav5662]

You are great bro

[@CodeBlessYou]

I am not Great brother. Grateful for your support❤❤

[@vipulwalke978]

Great, but what if i want to print the entered details on next page which will pop up after hitting submit button, how do I do that

[@CodeBlessYou]

You have to lift your useState variables in your parent component and then pass userDetails and setUserDetails in the props for your two components

[@vipulwalke978]

@@CodeBlessYou thank you

[@user-ox4mt7zt4k]

whats the diff btwn function handlechange(), and const handlechange() ?

[@CodeBlessYou]

both are same just a different function syntax. But using arrow function syntax is more effective

[@LeetStack]

a better and faster way to make the handleChange function is const handleChange = (event) => { setUsersAnswers(prev => ({...prev, [event.target.name]: event.target.value })) }

[@CodeBlessYou]

True, That's the same❤❤

[@jahan3735]

Hi! Great! I have another object inside details object. then how can I store value to those fileds

[@CodeBlessYou]

You have to use nested destructuring. The goal of all change function is, you have to restore all values from your current and object and just change the field which you want to update

[@jahan3735]

@@CodeBlessYou Thank you! I just separated array😌 and its working fine.

[@CodeBlessYou]

@@jahan3735 Nice❤❤

[@anonydass2.o817]

Brilliant 🔥

[@CodeBlessYou]

❤❤

[@regilearn2138]

does this valid for redio,checkbox, selectbox and etc

[@CodeBlessYou]

Yes

[@weebdeveloper]

Thank you

[@CodeBlessYou]

❤❤

[@LucasFernandezkleizardx]

Thank you so much! You rlly help me!

[@CodeBlessYou]

Welcome and Thanks for comment😀😀

[@bullcodeprogramacion1493]

the question is, if it's comming a data like this but the data is an array of this object and you wnat to do that for each object, how you can handle this?

[@CodeBlessYou]

Identify each object with using unique id or index

[@syntogaming8703]

const handleChange = (e) => { const name = e.target.name; const value = e.target.value; setPackagePrice((prev) => { return {...prev, [name]: value} }) } its showing error that setPackagePrice in not defined. is followed your code just names are changed

[@CodeBlessYou]

Then you have a problem in declaration of useState (CHECK names TWICE)

[@slebnation2035]

How do you render the data on the browser with form submission?

[@CodeBlessYou]

If you want to add data locally in your application then you have to lift your state up and then pass userDetails and setUsersDetails in form component by using props. In real world, for login and signup, we use JWT(JSON WEB TOKEN) Watch this for JWT: kzbin.info/www/bejne/ZpyqYY2ehaikoqc

[@slebnation2035]

@@CodeBlessYou Okay thank you! I'll watch some videos on lifting up state

[@sadiq.r9604]

Awesome explanation 👌

[@CodeBlessYou]

Thank you for this comment😇

[@sadiq.r9604]

@@CodeBlessYou but how do u take value, and implement other components

[@CodeBlessYou]

@@sadiq.r9604 Can you explain with example? I don't get your question

[@haris4392]

Which vs theme you use..??

[@CodeBlessYou]

AYU Dark

[@HocineKamikaz]

Nice work

[@CodeBlessYou]

😀❤❤

[@edena276]

Is that optimized ? Because each time a value inside the state Object change, all the value will changed for react ?! ?

[@CodeBlessYou]

Yes you can use this method, when you have more than 2-3 inputs.

[@eggxecution]

got quite confused at the name part, but I realized the name in input is an attribute and it can be anything....the name in const details is just the object that is used for manipulation.

[@eggxecution]

try it first hope you are right

[@CodeBlessYou]

In short, and the formdata object look like this: {first_name: " "}

[@aditya-d-]

thanks bhai

[@CodeBlessYou]

❤❤❤

[@vaibhavthakur9763]

What will happen if i refresh. will the entered character stay?

[@CodeBlessYou]

No on refresh It will clear the inputs

[@tareq4155]

thanks

[@CodeBlessYou]

❤

[@ashishpatil50]

plz make a video like this on react

[@CodeBlessYou]

I created complete course on React JS. You can check that from the pin comment.

[@dumitruspilevoi1268]

What theme you use

[@CodeBlessYou]

Ayu Mirage Bordered

[@swalihmuhammed2604]

i have doubt if we'r passing as value then why did you only mension name pls replay

[@CodeBlessYou]

Because we are getting value from event object and it's is not necessary that value is fixed. But for name, we have to fix same as we add in our data object. Because by using that field name attribute, we will add data value in that property. For example, if our object has property called "address", then in the input box, we give our input field name attribute to same as our property name "address". Otherwise when we do changes in that input box, how can we set value to address property. That's why I put more focus on name attribute.

[@khanfaysal993]

good

[@hollycow8171]

5:43 line number 14 😢😢😢

[@allanjohn7261]

how do i solve the input delay issue

[@CodeBlessYou]

Can you explain in details?

[@zandernoriega]

""

[@CodeBlessYou]

Yes my mistake😅😅😅

[@bharatns598]

instead of console.log how to print all details in screen

[@CodeBlessYou]

Use map method if you have array

[@brahmareddypitti4177]

How to print on webpage not console

[@CodeBlessYou]

Use JSX for that

[@jothilingam1342]

How to apply Switch function in this

[@CodeBlessYou]

You can apply Switch case for checking the form field name, but that will unnecessarily increase the lines of code❤❤

[@davidlintin]

Hi! Great explanation. How would you do this with an object that has nested data? I.e. { name: "", address: { street: "", neighbourhood: "", city: ""}}

[@CodeBlessYou]

For that you have to create two handleChange functions. 1 for handling name, age etc and one for handling nest address fields like this: const handleAddressChange = (event) => { const { name, value } = event.target; setFormData((prevFormData) => ({ ...prevFormData, address: { ...prevFormData.address, [name]: value } })); };

[@CodeBlessYou]

Thanks for asking great question. I also learn this trick because of you❤❤

[@osama5344]

After submitting data, how to empty input area automatically?

[@CodeBlessYou]

Set your state object to default

[@dabbarnaresh7791]

How , setvalue({ }) or any other option, I have more than 50 input fields

[@CodeBlessYou]

@@dabbarnaresh7791 create empty object of state and create one array of input fields name. Then using map method render input field with name and onChange and then write this 2 lines in handleChange function. I think that will work😀😀

[@simple8810]

nicee

[@CodeBlessYou]

😀

[@Yue-sx2em]

from form?

[@CodeBlessYou]

😅😅😅

[@kimayapanash8998]

Everything else is great But please next time share the code as well

[@CodeBlessYou]

I will❤❤

[@kow_enu]

add form reset code to it

[@CodeBlessYou]

After Console values in submit function, setUserDetails(DEFAULT_OBJECT). DEFAULT_OBJECT is that which you pass in useState initial value. SIMPLE :) If you want to Validate Form, Then I have another Tutorial - LINK : kzbin.info/www/bejne/Y6OvfmyqarqAhc0

[@user-rx2oj7kh4d]

theme name

[@CodeBlessYou]

AYU Mirage

[@EricOnYouTube]

I thought he was going to provide the link to the code.

[@CodeBlessYou]

It is just 2 lines of code

[@sushilkumar-ef7gh]

Real world forms are fucking complex

[@leahygotofficial5792]

Like angela yu

[@NarenderGaur-zh4dp]

form and submit spelling was wrong brother....in this video

[@CodeBlessYou]

Yes!! Sorry for that😅

[@TragicGFuel]

from kyu likha hai bhai

[@CodeBlessYou]

It is mistake. Sorry about that

[@iamfredi6306]

Thank you

[@CodeBlessYou]

Thanks for your support❤😇

[@bharatns598]

how to print the output in screen

[@karthikeyans.1681]

You have to do map the details array.

[@CodeBlessYou]

Right👍