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

@CodeBlessYou

Жыл бұрын

Thanks for Feedback😀

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

@CodeBlessYou

9 ай бұрын

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

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😇❤

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

6 ай бұрын

but the input values are not removing its stii there

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😇❤

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

@CodeBlessYou

Жыл бұрын

Great to hear!😇❤

Amazing! I searched for this solution for so long!

@CodeBlessYou

Жыл бұрын

Thanks for your support❤❤

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

@CodeBlessYou

Жыл бұрын

Welcome and thanks for your support😇❤❤

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 ❤️😇

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?

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

@CodeBlessYou

11 ай бұрын

Made my day❤❤❤

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

@CodeBlessYou

Жыл бұрын

Thank you for your support 😍😇

Thank you for the video! great vid.

@CodeBlessYou

Жыл бұрын

Thank you so much for your support ❤❤

Thank You man, this helped a lot!

@CodeBlessYou

Жыл бұрын

Thanks for your support❤❤

Nice bruh!! Keep up the good work

@CodeBlessYou

Жыл бұрын

Thanks a lot brother❤

wow this was simple with detailed explanation thank you

@CodeBlessYou

Жыл бұрын

Thanks for Feedback😀

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

@CodeBlessYou

Жыл бұрын

❤❤❤

Nice, thanks. It helped a lot.

@CodeBlessYou

2 жыл бұрын

Thanks for Comment😇

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

@CodeBlessYou

Жыл бұрын

Thanks for your comment😀

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

@CodeBlessYou

2 жыл бұрын

Thanks buddy😀

another awesome video thank you!

@CodeBlessYou

Жыл бұрын

Thanks for your support😀

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

@CodeBlessYou

2 жыл бұрын

My Pleasure Brother😀

Well Done Brother! Keep it Up🙌🙌

@CodeBlessYou

Жыл бұрын

Thanks for this comment❤

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

@CodeBlessYou

9 ай бұрын

Thank you so much. Really grateful for that

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😀❤

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

@diggerdog001

7 ай бұрын

I think it's just pattern

great content !! u gained a sub

@CodeBlessYou

Ай бұрын

Glad to hear that ❤❤❤

such a brilliant, thanks for sharing

@CodeBlessYou

Жыл бұрын

😇❤❤

Gajab bhai, Explained with high simplicity!!

@CodeBlessYou

Жыл бұрын

Thanks for your support❤❤

Thank you so much! You rlly help me!

@CodeBlessYou

Жыл бұрын

Welcome and Thanks for comment😀😀

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

@CodeBlessYou

Жыл бұрын

Sure I will 😇

Thanks for clearing my doubt, bro👍

@CodeBlessYou

Жыл бұрын

Thanks for your support brother❤❤❤

Very clear and simple bro

@CodeBlessYou

Жыл бұрын

Thanks for this comment😀❤

thanks for making this video !

@CodeBlessYou

7 ай бұрын

❤❤❤

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

6 ай бұрын

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

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

@CodeBlessYou

9 ай бұрын

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

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 - kzread.info/dash/bejne/X6aAr5utZbizf84.html

Thank you very much man, you awesome 👌

@CodeBlessYou

Жыл бұрын

❤❤❤

Clean code, Clear explanation 👍

@CodeBlessYou

Жыл бұрын

Thanks for this comment😇

neat and clean code

@CodeBlessYou

Жыл бұрын

❤❤❤

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

@CodeBlessYou

Жыл бұрын

❤❤

Love you broo, really impressive ❤❤

@CodeBlessYou

Жыл бұрын

Thanks for this support brother❤❤

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

5 ай бұрын

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

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

7 ай бұрын

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

7 ай бұрын

thank you @@CodeBlessYou

That's what I want thanks bro

@CodeBlessYou

2 жыл бұрын

😀😀

Genius bro, genius

@CodeBlessYou

Жыл бұрын

Thanks for your support. Grateful for that❤❤

You are great bro

@CodeBlessYou

Жыл бұрын

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

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

Thank you

@CodeBlessYou

Жыл бұрын

Thanks for your support❤😇

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❤❤

Nice work

@CodeBlessYou

Жыл бұрын

😀❤❤

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: kzread.info/dash/bejne/Yp97kryhgKbXnKg.html

@slebnation2035

Жыл бұрын

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

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)

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

Brilliant 🔥

@CodeBlessYou

Жыл бұрын

❤❤

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😊👍

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.

thanks bhai

@CodeBlessYou

11 ай бұрын

❤❤❤

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

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

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

does this valid for redio,checkbox, selectbox and etc

@CodeBlessYou

2 ай бұрын

Yes

thanks

@CodeBlessYou

Жыл бұрын

❤

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: " "}

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

@CodeBlessYou

Жыл бұрын

No on refresh It will clear the inputs

Which vs theme you use..??

@CodeBlessYou

5 ай бұрын

AYU Dark

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

@CodeBlessYou

7 ай бұрын

True, That's the same❤❤

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

@CodeBlessYou

5 ай бұрын

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.

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❤❤

plz make a video like this on react

@CodeBlessYou

3 ай бұрын

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

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😀😀

What theme you use

@CodeBlessYou

Жыл бұрын

Ayu Mirage Bordered

""

@CodeBlessYou

Ай бұрын

Yes my mistake😅😅😅

how do i solve the input delay issue

@CodeBlessYou

Жыл бұрын

Can you explain in details?

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

@CodeBlessYou

Жыл бұрын

Use map method if you have array

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❤❤

How to print on webpage not console

@CodeBlessYou

4 ай бұрын

Use JSX for that

good

from form?

@CodeBlessYou

Ай бұрын

😅😅😅

5:43 line number 14 😢😢😢

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

@CodeBlessYou

Жыл бұрын

I will❤❤

nicee

@CodeBlessYou

2 жыл бұрын

😀

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

@CodeBlessYou

9 ай бұрын

It is just 2 lines of code

theme name

@CodeBlessYou

2 ай бұрын

AYU Mirage

add form reset code to it

@CodeBlessYou

2 жыл бұрын

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 : kzread.info/dash/bejne/X6aAr5utZbizf84.html

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

@CodeBlessYou

Жыл бұрын

Yes!! Sorry for that😅

Like angela yu

🤩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

from kyu likha hai bhai

@CodeBlessYou

9 ай бұрын

It is mistake. Sorry about that

Real world forms are fucking complex

Thank you

@CodeBlessYou

Жыл бұрын

❤❤

how to print the output in screen

@karthikeyans.1681

Жыл бұрын

You have to do map the details array.

@CodeBlessYou

Жыл бұрын

Right👍