[name] takes the value of which is assigned in that input tag...if it's different from the useState obj key value so it makes a new key in useState obj....make sure you have to write the same name in the input tag as useState key...
Redux, Reducer, State Management(E-commerce website using React Redux)... Pretty much.. if you can make any advance level of video. Your explanation is so good.
Hello Gyus, check the meaning of return{ ...prevalue [name]:value Vinod trying to explain like below example : const animalSounds = {cat: 'meow', dog: 'bark'}; const animal = 'lion'; const sound = 'roar'; {...animalSounds, [animal]: sound}; The result will be {cat: 'meow', dog: 'bark', lion: 'roar'};
@@SaiSarthik uski value get krne ke lye agar aap sirf animal likhoge toh aapko result animal he milega lion nahi islye bracket use kiya taaki uski value mil sake lion
In input field i wrote< input type="text" placeholder ="enter name" but my placeholder is not visible and if i write type="number" placeholder is visible. Why this is happening???
Yes you guessed right, because that hook variable, named fullname, which we want to update using setFullname(), is an object. So in order to update that object hook variable, we need to write {}.
our primary concern is to create a new key:value pair having same "key" as our fname:" " so that we can replace/modify fname:" " with fname: " user input " with "[name]:value' we are creating a new key:value pair which later evaluated as fname:"user input" for the first input field in order to evaluate a key name we must enclose it within square brackets so here in place of "[name]" we get "fname" which is the value of name attribute in first input field. now we have 2 key value pairs with same key name (fname: " " and fname:" user input),here fname: " " gets modified/replaced by fname: "user input" and the function finally returns { fname: " user input ", lname: " ", email: " ", phone: " ", } hence when we try to access {fullName.fname} we get the modified/replaced value of "fname". please note:the value of name attribute and object keys must be same. I am new to react and not 100% sure about the explaination but this might be the correct explaination for that part.
pehly return me jsx ka code likhna hota tha to () ye use krty thy pr is baar return me array of objects use ho raha yaani j.s ka code to is liye curly braces use ki
hey if you are still waiting for the reply: basically what is happening is the value is nothing but the value that you get from typing inside the input field and you are assigning that value to[name] but now what this [name] is ? basically you have given the name as a prop inside the input tag, now lets take an example that you have written in fname input field so now the name that will be passed on Onchange will be 'fname' so you are saying [fname] : value that you have typed now inside the return{ ...preValue, [name]:value, }; you are actually taking the whole value of preValue and saying give me everything from that object inside useState and also assign the [fname] : value to it. (this is from the eg we took where the value is nothing but the value you typed) so it will get updated, actually you can remove the value property from you input tag and still your code will work..... thanks regards MR ...Sah
@@abhisheksah1867 bro, you explained it beautifully, thanks for that. After reading ur explaination I understood that name: value will be updated after comparing ...preValue with [name]:value. I mean to say the input field which is being typed will get identified and give value ("whatever we type in the input field"). Eg: if we type 12345 in the phone field, then it'll give name as phone and value as number like phone:12345 ,then name: value will be updated/replaced accordingly. Bt my new doubt is why this [name] written inside square bracket, is there any specific syntax are we following here? what is the meaning of this [ ]. I know without [ ] bracket, the name : value is behaving like new property. Then why specifically this big [ ] bracket in the name?
I'm getting error : object are not vaild as a React child (found: object with key{fullName,pass,email}).if you meant to render a collection, use an array instead
I am disappointed this is one of my fav channel This playlist is a mess almost all videos is related to the previous one I try to follow it from begining too many repetition and the videos has not been wrap up correctly If the playlist is well classified it would be one of the best playlist on react the way u explain is gud though
my friend it is because we do not want to add a field in fullName (object) we just have to manipulate the created fname and lname inside the fullName (object)
to every name eg fname, lname,email,phone its setting the value like [fname->fullName.fname, lname-> fullname.lname, email-> fullName.email, phone-> fullname.phone]
hey Guys, Today we gonna see something best of ReactJS. No, I am not kidding. It's true. How only two lines of codes save our 100 lines of codes.
Bhai kya aap blogger Templet banna sikha sakte ho
how works [ name ] = value, in this code Please tell me
@@Abhishek-bo9ge object destruction
i know air video banane me bahot time lagta hai mahadev aapko bahot kush rakhe or kabhi financial problem na ho aapko
I must say, at starting of the form I got stuck, but the way you continued to explain small parts is commendable.
thanks, it helped a lot...
Glad it helped!
[name] takes the value of which is assigned in that input tag...if it's different from the useState obj key value so it makes a new key in useState obj....make sure you have to write the same name in the input tag as useState key...
This is best series. In starting I can not understand React but now it is 💣BOOM GUYS 💣 very easy for me.🧨❤💣
😂
Redux, Reducer, State Management(E-commerce website using React Redux)... Pretty much.. if you can make any advance level of video. Your explanation is so good.
I just jumped to this video when I read the title from the notification. Very catchy titles lol.👍
haha I knw, but it's true
@@ThapaTechnical Yes true. Are you from Nepal?
Yes
@@ThapaTechnical Great. I was not knowing that Nepali's know Hindi.
Sir main bhut confuse thi [name] kyu use kiya hai thanks sir doubt solve krne ke liye you are the best teacher for react ❤
your explanation methods are really awesome big brother ❤
This is what I was looking for. But do remember that is not at all login form :)
thanks bro , I didn't understand
... then i watch video again and i understand greatly. :-)
what is the use of value attribute 'value={fullName.fname}' in input element because whether I remove it from the code however the code works fine.
bahut sandar tha ye vinod bhai
That's the way of coding ✌🏻
Hello Gyus, check the meaning of
return{
...prevalue
[name]:value
Vinod trying to explain like below example :
const animalSounds = {cat: 'meow', dog: 'bark'};
const animal = 'lion';
const sound = 'roar';
{...animalSounds, [animal]: sound};
The result will be
{cat: 'meow', dog: 'bark', lion: 'roar'};
why animal is in square brackets
@@SaiSarthik uski value get krne ke lye agar aap sirf animal likhoge toh aapko result animal he milega lion nahi islye bracket use kiya taaki uski value mil sake lion
Jabardast video sir..
U r awesome
Bhai aap bahut aage tak jayegen ....
your teaching is awesome
Hello Thapa ,
I have one confusion
...preValue,
[Name]: value;
Why we are using [ ] brackets
Explain these
Answer mila?🧐😅
var a = "b"
var c = {[a]: "d"}
details examine
[a] value containe "b"
so c obejct represent like this
var c = {b : "d"}
@@shubhammaheshan9241 Bhai samajy nahi aaya
@@shubhammaheshan9241 thank you bhai
@@shubhammaheshan9241 thanks buddy
Thank you so much sir yeh video best laga
Hi thapa, ur big bigger biggest fan
Really thank you so much ☺️
Why you did not click on "submit me" through out video
Thank you very much brother!
awesome explanation thank you so much sir
You are greate web teacher
bhai awsome ho yaar
Great yar. Thanks
why are we passing the 'name' inside the brackets ? for example [name] : value, I dint get this part
sir please reply to this.
const foo = 'bippity';
const obj = {
[foo]: 'boppity'
}
console.log(obj) // { bippity: 'boppity' }
then wat the use of the submit button
bro 100 line samaj agayi lakin 2 line nai aaye
ksm kaisa kar rahi ha do line samaj nai aaaya
sir really very usefull video thanx sir 👌
Awesome 😊
In input field i wrote< input type="text" placeholder ="enter name" but my placeholder is not visible and if i write type="number" placeholder is visible. Why this is happening???
Ye awesome tha
good concept janu
Please add some more small project related videos on react js like your "Todo List App project". Thanks video was nice and title of video was :-)
All doubts clear...
How to make the button function?
When I click on the button and the data stored..
why i am using curly braces when returning inside the input event. is because the output should be in object format ?
Yes you guessed right, because that hook variable, named fullname, which we want to update using setFullname(), is an object. So in order to update that object hook variable, we need to write {}.
Great..
i am 2nd
cause first comment is yours😂
Sir, this playlist have 93 videos but now it have only 85 videos. Why did you delete 8 videos from this playlist???
Could you pls tell me if I want to do the same thing using onsubmit then what should I do?
hello sir, please is code ko ek baar thoda aur detail me explain kar dijiye
return{
...prevalue
[name]:value
our primary concern is to create a new key:value pair having same "key" as our fname:" " so that we can replace/modify fname:" " with fname: " user input "
with "[name]:value' we are creating a new key:value pair which later evaluated as fname:"user input" for the first input field
in order to evaluate a key name we must enclose it within square brackets
so here in place of "[name]" we get "fname" which is the value of name attribute in first input field.
now we have 2 key value pairs with same key name (fname: " " and fname:" user input),here fname: " " gets modified/replaced by fname: "user input" and the function finally returns
{
fname: " user input ",
lname: " ",
email: " ",
phone: " ",
}
hence when we try to access {fullName.fname} we get the modified/replaced value of "fname".
please note:the value of name attribute and object keys must be same.
I am new to react and not 100% sure about the explaination but this might be the correct explaination for that part.
@@rohitsahu1443 Thanks Rohit for the explanation. I am trying to understand your explanation!
@@rohitsahu1443 Hi...
@@tapaskumarsahu501 hello
@@rohitsahu1443 Thanks for the reply bro... I need ur help in learning react how can I contact you, can u give me any social media id
Sir is form ki values submit ni ho rhi. mean k submit krny pe values input box se nikl kr dosri jaga store kesy hon gi
bhaiya return Mei aapne parenthesis use Kyo nahi Diya pls reply
Great Series Thapa Sir. I Want to know, how can I reset the form after submit ? I mean I want to show result at top and input fields to be reset.
you can use settime and event.preventDefault
What does this line of code means?
const {name, value} = event.target
Destructing it will name and value from event.target
Thank you so much sir❤😍
your video is really helpful sir
how to get value from multiple checkbox please answer
Hi how to login with two user and after that it has redirect to home page
ThankYou!!
sir prevalue define bhi nhi us m data kha s aayega??? plzz tell me
bhai ye wali video m bahut saare doubts aa rhe hain ... ratta lagana padega
Sir wait l am confused...return () k saath use karte they na . Though ye return {} kya hai . And difference kya hai?
pehly return me jsx ka code likhna hota tha to () ye use krty thy pr is baar return me array of objects use ho raha yaani j.s ka code to is liye curly braces use ki
Hey bhai, thoda yeh samjha sakte ho, nai samjh arha, plsss
At video time "9:51"
return{
...preValue,
[name]:value,
};
hey if you are still waiting for the reply:
basically what is happening is the value is nothing but the value that you get from typing inside the input field and you are assigning that value to[name] but now what this [name] is ?
basically you have given the name as a prop inside the input tag, now lets take an example that you have written in fname input field so now the name that will be passed on Onchange will be 'fname' so you are saying [fname] : value that you have typed now inside the return{
...preValue,
[name]:value,
};
you are actually taking the whole value of preValue and saying give me everything from that object inside useState and also assign the [fname] : value to it. (this is from the eg we took where the value is nothing but the value you typed) so it will get updated, actually you can remove the value property from you input tag and still your code will work.....
thanks regards MR ...Sah
@@abhisheksah1867 thank you so much brother 👍
@@abhisheksah1867 bro, you explained it beautifully, thanks for that. After reading ur explaination I understood that name: value will be updated after comparing ...preValue with [name]:value. I mean to say the input field which is being typed will get identified and give value ("whatever we type in the input field").
Eg: if we type 12345 in the phone field, then it'll give name as phone and value as number like phone:12345 ,then name: value will be updated/replaced accordingly.
Bt my new doubt is why this [name] written inside square bracket, is there any specific syntax are we following here? what is the meaning of this [ ].
I know without [ ] bracket, the name : value is behaving like new property. Then why specifically this big [ ] bracket in the name?
@@anshumaan454 I think that is array destructuring
I'm getting error : object are not vaild as a React child (found: object with key{fullName,pass,email}).if you meant to render a collection, use an array instead
Hello I need your help
@@techhelper9054 yes
zabardast
How can we apply condition while checking ??
Between return ??
Very useful video
I am disappointed this is one of my fav channel
This playlist is a mess almost all videos is related to the previous one
I try to follow it from begining too many repetition and the videos has not been wrap up correctly
If the playlist is well classified it would be one of the best playlist on react the way u explain is gud though
how to use the select and get these values.
HI Vinod yahi same chize hum onClick pe kaise achieve kar sakte hai?
Aapane jaise bataya waha tak achieve karliya now the same thing onClick pe kaise achieve
Email template pe video Bana do yar kitne Baar comment Karu
Learning angular which is best react or angular i know spring boot
Answer plz
video ke end me codding part ko screen par clear to dikha do yaar..
Awesome
Please share the Git hub link for React JS project.
Hello sir , can you plz share a tutorial on table booking procedure in hotels ?
in the return block ...previous is destructuring its understandable but how does [name]:value works? Please explain.
my friend it is because we do not want to add a field in fullName (object) we just have to manipulate the created fname and lname inside the fullName (object)
Thapa sir how we can add file,i need to add image
thank you so much sir
Thank you sir
...previousvalue,
[name]:value
please any one reply me for this im'nt understanding this part
as far as i have understood we are assigning the new value to the object to be changed but i dont understand why name is in square bracket?
const foo = 'bippity';
const obj = {
[foo]: 'boppity'
}
console.log(obj) // { bippity: 'boppity' }
Amazing nice
where i can get this code sir .
Bhaiya kya app login Form ka entire code provide kara doge?
how to save form data in MySQL database?
how to validate gender and option field
How to set cookies for my full website
Anyone thoda yeh samjha sakte ho, nai samjh arha, plsss
At video time "9:51"
return{
...preValue,
[name]:value,
};
How to upload files using this method ??
sara code b kahi show kr dia kro yrr bht difficult huva is ko change krna
sir how to use formik for form
Sir plz make a video on react form validation
Sir,iska code kaha milega
osm
dude make a video where the data stored in local m/m or db
Sir ap ak video iski bhi banaiye na how to create anti csrf token in login page sir impossible condition ke sath
Please sir muje iski bohut jarurat he
[name]: value
Explain this I can't find it on Google
to every name eg fname, lname,email,phone its setting the value like [fname->fullName.fname, lname-> fullname.lname, email-> fullName.email, phone-> fullname.phone]
Sir please upload video life cycle method React.
how to get source code
❤️
Plz create chat box using js and jQuery
anyone can tell me the steps of source code plz
Ek line me kaise hoga
Bhai Aap Comments Dekh Rare Hai Na
Please reply me.
@Thapa_Technical Thanks : ).
bhai code explain karo bhai please i don't understood
www.remove.bg/
Is website ko coding ke throw kaise bna sakren hai bhaiya ji
So please explain me