Full React Tutorial #27 - Controlled Inputs (forms)

  Рет қаралды 300,256

Net Ninja

Net Ninja

Күн бұрын

Hey gang, in this React tutorial we'll see how to use input fields & track what a user types into them, using controlled inputs.
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

Пікірлер: 183
@dynerushd7517
@dynerushd7517 3 жыл бұрын
The fact that this react course is completely free is insane, Your way of teaching is really clear and easy to understand. Keep it up my man you are god given.
@natnaelghirma2617
@natnaelghirma2617 3 жыл бұрын
God*
@spennybad
@spennybad 3 жыл бұрын
/* create new blog form */ .create { max-width: 400px; margin: 0 auto; text-align: center; } .create label { text-align: left; display: block; } .create h2 { font-size: 20px; color: #f1356d; margin-bottom: 30px; } .create input, .create textarea, .create select { width: 100%; padding: 6px 10px; margin: 10px 0; border: 1px solid #ddd; box-sizing: border-box; display: block; } .create button { background: #f1356d; color: #fff; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }
@GMBgTTg4d
@GMBgTTg4d 3 жыл бұрын
thx
@astrix8812
@astrix8812 3 жыл бұрын
thanks king
@Ramification
@Ramification 3 жыл бұрын
Thank you good sir!
@stanislausalvajufinto8735
@stanislausalvajufinto8735 3 жыл бұрын
You dropped this 👑, king
@SM-vo5gj
@SM-vo5gj 3 жыл бұрын
thank you
@pulledporksammiches
@pulledporksammiches Жыл бұрын
I would hit the like button every time i watch this if I could. Great way of explaining React my dude. It's been hard for me to understand React, but in the last several months, I've been determined to get really good. I've watched this video like 5 times already easily. And every time I do, I can confirm that it has sunk in way more every time.
@NetNinja
@NetNinja Жыл бұрын
That's fantastic to hear Susan, sometimes it takes a while to cement in, but once it does, hopefully it sticks :) I find that application and giving yourself little challenges help aid this even more so! (learn by doing).
@maskman4821
@maskman4821 3 жыл бұрын
recap this episode talks about two-way data binding ( a very important concept in reactjs, usually used in form element ) 1. assign a dynamic value to 'value' attribute of input/textarea/select element. example const [name, setName] = useState('mario') 2. listen 'change' event with a handler (anonomous function) to set value, for example setValue(e.target.name)}> thats it !!!
@yashrdoshi
@yashrdoshi 3 жыл бұрын
I'm reading your recap in every video. That's really useful !!
@jackw.3978
@jackw.3978 2 жыл бұрын
@@yashrdoshi I still don't understand why exactly the value of the input needs to be set to the the dynamic value. And why it is letting him change the text in the input after he implements the onChange event. Would like to understand what happens in the background...
@carmensandoval5581
@carmensandoval5581 2 жыл бұрын
@@jackw.3978 Great question Jack! The onChange attribute fires everytime the value of the input is changed. And since the onChange event is grabbing a reference of the value attribute's value to set a state variable, we must set the value attribute to a 'dynamic value'. I hope this helps.
@nielfollero5
@nielfollero5 2 жыл бұрын
What I don't understand is why do we need to assign the value of an input since we don't use this in anything. When we need the value of that input, we use the state to process it(maybe pass it in the backend or something), not get the actual value reference from the actual element.
@emmanuelamodu2390
@emmanuelamodu2390 3 жыл бұрын
Thank you so much, having such quality content for free is mindblowing
@michaelandersen8570
@michaelandersen8570 3 жыл бұрын
Honestly you just might get me at job next week. I've got a test coming up this Thursday and this series is just *chef's kiss*. Thank you SO much. I'll be sure to send some money in your direction if it goes well. There is so much content on KZfaq but none that fits my current level better than yours. It is wonderful to know that your content is up-to-date, uses best practices, and is of great production value. The Github repo is also super nice to have. 💪
@TheRahulDBZ
@TheRahulDBZ 3 жыл бұрын
Good luck
@michaelandersen8570
@michaelandersen8570 3 жыл бұрын
Got the job! Gonna sign up for the Udemy course.😎
@michaelandersen8570
@michaelandersen8570 3 жыл бұрын
@@TheRahulDBZ Thank you. Pretty stoked about it. 🚀
@mistersir3185
@mistersir3185 3 жыл бұрын
@@michaelandersen8570 any important tips you can give to someone like me who's looking to apply for jobs?
@michaelandersen8570
@michaelandersen8570 3 жыл бұрын
@@mistersir3185 I can only speak for myself, and to be honest a lot of it has to do with pure luck. Best tip I can give is to code as much as you can and put it on Github. Make your own stuff and take inspiration from tutorials in the beginning - but avoid pure copying. When you have built a few small projects you'll have confidence in yourself and it will reflect in the way you write about yourself in your resume. I think recruiters pick up on this. And it will also help tremendously at an interview.
@juggysingh1470
@juggysingh1470 3 жыл бұрын
If you want to use default text in your input, then have it clear on click, here is an example of how to do it; // input state const [title, setTitle] = useState('Default Text'); // add initial title state value here setTitle(e.target.value)} onClick={(e) => setTitle('')} // clear input on click /> Also, thanks for your great work Net Ninja, I have subbed now, as that's the least I can do for your great tutorials.
@shahiqqureshi7652
@shahiqqureshi7652 6 ай бұрын
Good suggestion, personally I think it might be better to use the placeholder attribute, because if someone goes back to edit that field it will reset.
@wanyingli246
@wanyingli246 3 жыл бұрын
I watched this series yesterday and I catch up with it today! Shaun is definitely a life saver! I bought some React course in Udemy and I just can't stand the instructor's speaking tone, and I am easily distracted by hearing this, but I love shaun's teaching style!
@juggysingh1470
@juggysingh1470 3 жыл бұрын
I have done the same, following courses from Udemy, but never fully grasping REACT as I also had issues with the tutors way of explaining too, until that is I found Net Ninja, he is a Legend!!!!
@kashmirtechtv2948
@kashmirtechtv2948 3 жыл бұрын
But where to go from here after finishing this series?
@gradientO
@gradientO 3 жыл бұрын
Off-topic, but can you show your desk setup?
@peterluo1776
@peterluo1776 Жыл бұрын
This got to be the simplest explanation I've encountered. Awesome video.. Thanks for sharing 👍
@NetNinja
@NetNinja Жыл бұрын
Thanks for watching Peter :)
@simonkalu
@simonkalu 3 жыл бұрын
I'm proud of net ninja
@CodeRCreatives
@CodeRCreatives 3 жыл бұрын
yaa me too...he is amazing at his work
@melssf7852
@melssf7852 Жыл бұрын
have I told you lately that I love you? :D You just took something that was confusing me and simplified it so well. Your free content led me to buy one of your udemy courses and I plan to buy a few more because you explain things in a way that just clicks for me. Thank you Shaun, truly...
@NetNinja
@NetNinja Жыл бұрын
That is awesome to hear Mels :) your support is much appreciated!
@jagaroTV
@jagaroTV 7 ай бұрын
This is much better than a paid tutorial..EXCELLENT JOB NET NINJA
@heroinedecheshire7065
@heroinedecheshire7065 8 ай бұрын
You're amazing! I always thought forms are a pain in React but you cleared them up for me! These videos are amazing and this is what passion looks like!
@NetNinja
@NetNinja 8 ай бұрын
That's brilliant to know :) glad it helped!
@terrencejanairo2675
@terrencejanairo2675 8 ай бұрын
@@NetNinja do you have router v6 in this project?
@wenlongzhang5262
@wenlongzhang5262 Жыл бұрын
Great tutorial of controlled inputs! I cannot thank you more!
@NetNinja
@NetNinja Жыл бұрын
Thanks Wenlong!
@hayoudoing
@hayoudoing Жыл бұрын
Straight to the point. Thanks a lot!
@ohitsmekirst
@ohitsmekirst 3 жыл бұрын
Not one to comment usually but this might just be the best explanation I've seen. Top quality content!
@tarekghosn3648
@tarekghosn3648 2 жыл бұрын
even though i watched your videos before and coded with you. this coming back to them shows me more detail. thank you
@averageromanian3940
@averageromanian3940 Жыл бұрын
A complex topic made simple. Very nice video!
@NetNinja
@NetNinja Жыл бұрын
Thanks!
@01dicktracy
@01dicktracy Жыл бұрын
I did not know I can understand everything so easy. Thank you so much Shaun!
@jAMES-xy6wh
@jAMES-xy6wh 2 жыл бұрын
I came here to learn about React Router, and I found a goldmine of information. What a fabulous course!! And it is Free? How do I compensate you for your labor?
@ruin9
@ruin9 6 ай бұрын
I really love this accent ,keeps the video interesting
@NetNinja
@NetNinja 6 ай бұрын
Thank you! 😃 I made it myself
@adriennegrace2465
@adriennegrace2465 3 жыл бұрын
Thank you - loving this series so far! One comment - for accessibility, you should keep the htmlFor attribute in the label and use the input id attribute, so they are connected.
@TimWinfred
@TimWinfred 3 жыл бұрын
Yes! Literally was just about to say this!!!
@digvijayyamagekar4300
@digvijayyamagekar4300 Жыл бұрын
this is some quality stuff bro, thanks for putting it on youtube for free 🤩
@tarokins
@tarokins 3 жыл бұрын
Form Styles: /* create new blog form */ .create { max-width: 400px; margin: 0 auto; text-align: center; } .create label { text-align: left; display: block; } .create h2 { font-size: 20px; color: #f1356d; margin-bottom: 30px; } .create input, .create textarea, .create select { width: 100%; padding: 6px 10px; margin: 10px 0; border: 1px solid #ddd; box-sizing: border-box; display: block; } .create button { background: #f1356d; color: #fff; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }
@shingiraibondai747
@shingiraibondai747 3 жыл бұрын
Short and precise , I LOVE IT. 😍😍😍😍
@WEBDEVIndo
@WEBDEVIndo 3 жыл бұрын
awesome mentor. I am sure he is really expert in this field .
@learningit2572
@learningit2572 2 жыл бұрын
Net Ninja, You are a Legend!!!! Best of the Best
@LGgos
@LGgos 2 жыл бұрын
thank you it helped me quickly understand how it works after I had an implementation question in an interview that didn't go so well
@arrozfritoo
@arrozfritoo 3 жыл бұрын
3:07 thats was the best uh uh i heard in my life
@TripeDemo
@TripeDemo 2 жыл бұрын
Extremely useful and simple explanation, thank you!
@alexmwansa6414
@alexmwansa6414 2 жыл бұрын
You have no idea how much I love your videos and how much they have helped me. Thank you for your service.
@Human_Evolution-
@Human_Evolution- 3 жыл бұрын
The best vieo on this subject. I spent 45 min looking until I found you. All others are inferior.
@nylivehc9008
@nylivehc9008 Жыл бұрын
I don't know why I laugh with the yohoo! 😂
@rogeclash2631
@rogeclash2631 Жыл бұрын
As always many thanks for teaching all these
@giroda
@giroda 2 жыл бұрын
splendid narration, neat and clear, top!
@chhumchanleak7642
@chhumchanleak7642 2 жыл бұрын
Thank you mr for saving me from headache
@BlackDev
@BlackDev 2 жыл бұрын
remember when this looked foreign fells nice being able to read through so fluently humans are amazing
@meliVinelli333
@meliVinelli333 2 жыл бұрын
Extremely helpful. Thank you very much
@jakubbarabasz3560
@jakubbarabasz3560 2 жыл бұрын
Realy helpful series!!!
@NetNinja
@NetNinja 2 жыл бұрын
Thanks Jakub
@0x0abb
@0x0abb 2 жыл бұрын
awesome work - once again
@umuthankuzur3184
@umuthankuzur3184 3 жыл бұрын
Hi ninja. Thx for all the playlist again. But i have a question in particular this session. U wrote repetitive code in this file to handle state but u could eliminate code via using a form state object. Why didnt u that? Is because of u dont want trigger updating whole object on all types? Is this for upgrading performance?
@adamksiazkiewicz3643
@adamksiazkiewicz3643 2 жыл бұрын
Very good stuff. Save my day.
@NetNinja
@NetNinja 2 жыл бұрын
Glad to hear it! Thanks for watching Adam :)
@rafaelpereiradias2567
@rafaelpereiradias2567 Ай бұрын
thanks! this video just helped me !
@NetNinja
@NetNinja Ай бұрын
Awesome! thanks for watching Rafael :)
@jamshoot6475
@jamshoot6475 Жыл бұрын
3:08 i really like that woohoo sound at 2x
@GiancarloCarccamo
@GiancarloCarccamo 2 жыл бұрын
great video man
@njabulothwala5152
@njabulothwala5152 2 жыл бұрын
This is so Good man 😁😁😁
@kushagramandal1501
@kushagramandal1501 3 жыл бұрын
Hello there, just wanted to know when this playlist will be completed? Awesome work BTW!
@TheRahulDBZ
@TheRahulDBZ 3 жыл бұрын
you sound like my project manager
@kushagramandal1501
@kushagramandal1501 3 жыл бұрын
@@TheRahulDBZ bruh😅
@prashanttanwar3261
@prashanttanwar3261 3 жыл бұрын
@@TheRahulDBZ lol😂
@mohityadav21
@mohityadav21 2 жыл бұрын
3:05 Wohoo!! I love this small funny things 😍
@pauloferreira4040
@pauloferreira4040 2 жыл бұрын
Maybe a dumb question, but why do you need the code on line 14 (value = {title})? The person typing inside the text field is already changing its value right? Correct me if I am wrong, but I believe that this code would be useful in situations when the {title} is changed (using the setTitle, of course) by some external event (not necessary for this specific blog page example of yours), e.g., a case where we could allow the user to come back to an unfinished blog entry and the title input field would then be populated with the contents of an earlier-entered {title} variable. Is that the right way of seeing this? thanks
@imgrori5435
@imgrori5435 10 ай бұрын
You're the goat
@hughbillings8895
@hughbillings8895 3 жыл бұрын
.create { max-width: 400px; margin: 0 auto; text-align: center; } .create label { text-align: left; display: block; } .create h2 { font-size: 20px; color: #f1356d; margin-bottom: 30px; } .create input, .create textarea, .create select { width: 100%; padding: 6px 10px; margin: 10px 0; border: 1px solid #ddd; box-sizing: border-box; display: block; } .create button { background: #f1356d; color: #fff; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }
@mohammedsaheed9847
@mohammedsaheed9847 3 жыл бұрын
It's really awesome having this tutorial for free. Thank you very much. However, I'd like to know if it's possible to use json server for authentication, or if you have any tutorial on user form validation and authentication with json. Thank you
@rafiashan8389
@rafiashan8389 18 күн бұрын
Thank You Brooo
@aybak3k
@aybak3k 3 жыл бұрын
const [title, setTitle] = useState('') const [body, setBody] = useState('') const [author, setAuthor] = useState('mario')
@anmolagarwal5952
@anmolagarwal5952 3 жыл бұрын
is it wrong to just trigger a onclick when submit button is clicked and just fetch value of all fields. This way we can escape all that react js extra redundant code.
@ahmedpatel408
@ahmedpatel408 Жыл бұрын
TY Mate
@Gamerfan2000
@Gamerfan2000 3 жыл бұрын
Hello Shaun, Can you please tell me, what extension you used for the javascript syntax theme? For example yellow for the variable/method declarations and purple for the return method, etc? Thank you in advance, PS. Your tutorials are the best on the internet. Cheers :)
@marek19922209
@marek19922209 7 ай бұрын
Instead of using routing from react we can use fetching from backend ?
@elyeskabous2343
@elyeskabous2343 9 ай бұрын
Thank you so much
@NetNinja
@NetNinja 9 ай бұрын
No problem :) hope it was helpful
@Invitamu
@Invitamu Жыл бұрын
i like your yuuhuu in the video HAHAHA
@Atrainn234
@Atrainn234 4 ай бұрын
Is it possible to set the state for all your inputs at once with the onchange function 🤔?
@belafekete3125
@belafekete3125 3 жыл бұрын
Great tutorial! Thanks Ninja How can I use the public folder?
@RajvirSingh1313
@RajvirSingh1313 3 жыл бұрын
It is just laying around there but it is handy when you have images and other static stuff that will be okay to be open to see by the public. src and other folders are kinda private or you could say the stuff that only you could see means the source code and one more thing I want to tell you that you should learn next.js too as it would be more good and robust combination with react. And you can learn more about next.js in this video kzfaq.info/get/bejne/idGclsKXtqjRk6c.html&t. I hope I helped you , have a nice day
@emmuoriginals5296
@emmuoriginals5296 3 жыл бұрын
Thanks ninja
@timtech9361
@timtech9361 2 жыл бұрын
This is great and all. But what if you have a button that duplicates your Create component. Now you have two input Create components. Your state auto saves the input permanently from the first Create component. How do you reset the state to initial so we can have two Create components producing two DIFFERENT values on render?
@ibrahimkaarich2192
@ibrahimkaarich2192 Жыл бұрын
Hey M y prof i wish you're good and having a nice day please i have a question is this the full Tut of REACT i mean is will be more videos about REACT in this is playList
@juliandraudins266
@juliandraudins266 2 жыл бұрын
Thanks!
@NetNinja
@NetNinja 2 жыл бұрын
Thanks for the support Julian! :)
@kashmirtechtv2948
@kashmirtechtv2948 3 жыл бұрын
Very useful
@westernpigeon
@westernpigeon 2 жыл бұрын
why are there no tutorials on class components? ANYWHERE on the internet?
@dileepbannikatti7900
@dileepbannikatti7900 3 жыл бұрын
Please cover all scenario like check box radio button and check tree view and complex form validation and getting response ,api crud operation
@nihaljain246
@nihaljain246 3 жыл бұрын
If the state variable is const, how can it be updated? I tried looking at the React docs for the useState hook but they didn't comment on this. I am just starting out with JS & React, so not sure if I was looking at the right places for the answer. It would be nice to know your comments on this, Shaun.
@codewithfarhad8594
@codewithfarhad8594 3 жыл бұрын
state is not variable, we are destructing an array when we say const [x, y] = useState(""). and this is the regular behavior of const. const is storing reference to the array which can not be changed/reassigned. but we are not changing/reassigning the array here. We are just changing one of the values/variables stored in the said array, in this case, the value of x. Hope this helps. also if you want to study further just search on youtube for something like "difference between const, var, and let in javascript"
@Colstonewall
@Colstonewall 3 жыл бұрын
If you look at this video (kzfaq.info/get/bejne/muB1nMiIxrWudWQ.html) at about 4:14 it explains this fairly well. As Ali stated in his comment, this is an Array, and an Array (with Const) can be updated. The video doesn't talk about React, but about Const and when/if it can be updated.
@tomasburian6550
@tomasburian6550 2 жыл бұрын
This is a good tutorial. But I would definitely need to know how to use buttons to set a boolean variable from false to true and vice versa.
@echo991
@echo991 Жыл бұрын
Is it necessary to set the input value to the dynamic title/author state? It doesn't appear to do anything.
@nizarkadri3109
@nizarkadri3109 2 жыл бұрын
Can we use same id in different components , I mean if I have a in Home and in BlogDetails, is it valid?
@eltoneycomerad8758
@eltoneycomerad8758 3 жыл бұрын
You are Great
@mohamedchine-ky6yk
@mohamedchine-ky6yk 3 ай бұрын
hey great video , btw is it bad if we get the value of the inputs directly with getelementbyid and we delete all the usestates like for example instead of this : [x,setx]=usestate("") {setx(e.target.value)}} /> we do this : x=document.getelementbyid(x); because tbh i dunno what's the use of the usestates with the form
@MohitRakhade
@MohitRakhade 3 жыл бұрын
3:08 ooh wwwoh
@Mahmudulhasan-ts5hm
@Mahmudulhasan-ts5hm 3 жыл бұрын
thanks brow
@shadebinder3599
@shadebinder3599 Жыл бұрын
For some reason my button add blogs isn't in the center, its aligned with the left side of the boxes
@chanandlerbong6176
@chanandlerbong6176 3 жыл бұрын
so whenever any input field change happens whole form will be re rendered right? How to avoid that?
@umarislam3315
@umarislam3315 3 жыл бұрын
Do we need state management system such as redux for modern reactjs apps?
@user-yz6hr5wd9e
@user-yz6hr5wd9e 9 ай бұрын
When i start type in the input i lost focus like input rerender and can type only once? Why is that?
@kingsleymgbachi5662
@kingsleymgbachi5662 Жыл бұрын
which plugin do you use to get the html autocomplete?
@Eslam-ig2gf
@Eslam-ig2gf Жыл бұрын
@TheForestofNoobs
@TheForestofNoobs 5 ай бұрын
"whooohouuu" :D
@Sukaichae
@Sukaichae 11 ай бұрын
woohoo!
@ridl27
@ridl27 3 жыл бұрын
ty
@lonedruid3360
@lonedruid3360 Жыл бұрын
long live brother
@Shou06
@Shou06 3 жыл бұрын
why dont you create a course for react along with nextjs in udemy
@nikitalukashuk2978
@nikitalukashuk2978 3 жыл бұрын
I was a littile bit confused, because i haven't known that select has "value" property
@sinnie.62.
@sinnie.62. 3 ай бұрын
It seems i am the only one who is not able to fetch data when clicking on the blog I even copy pasted from repo cause i was not able to find my mistake can some one help
@yman_kh
@yman_kh 6 ай бұрын
I do not get what is the point of using value={title} in the input form!!!
@GabrielMartinez-ez9ue
@GabrielMartinez-ez9ue 3 жыл бұрын
Quick question: if we set a state using const, how come later on we can update that value? const values cannot be updated
@kananabdlyv
@kananabdlyv 3 жыл бұрын
We create state using const but the state is not a data type so it doesn't act like a simple value. Process is done by state not const directly
@vermusl6316
@vermusl6316 2 жыл бұрын
Watch the useState video again, he already explained there
@hoanglongpham5907
@hoanglongpham5907 3 жыл бұрын
I have an idiot question but i need to understand? We use Hook to replace props and State in Class Component right? please explain for me, because i don't see Shaun talk about props and state?
@NetNinja
@NetNinja 3 жыл бұрын
Hooks are another option that can be used to manage state as well as for other things. You can use the useState hook in a functional component for that component to have state, instead of relying on a class-based component for state. Props are not replaced at all by hooks, they are still very relevant and needed to pass data from one component into another. I covered props earlier in the course (lesson 11, 12, 13) :)
@hoanglongpham5907
@hoanglongpham5907 3 жыл бұрын
@@NetNinja it means, we don't need create state when using hook like create state in class component, right ? so anyway, thank you a lots for replying me
@prashanttanwar3261
@prashanttanwar3261 3 жыл бұрын
@@hoanglongpham5907 Hooks are used with functional components because functional components dont have state like class components do BUT by using hooks we can add state to our functional components.
@user-xb7xp5kj9n
@user-xb7xp5kj9n Жыл бұрын
wooohooo
@Human_Evolution-
@Human_Evolution- 3 жыл бұрын
Today I learned, body = bodeh.
@Hustada
@Hustada 2 жыл бұрын
Is it possible to use "useState" one time for all inputs?
@oscaralderete8156
@oscaralderete8156 2 жыл бұрын
Actually yes. You need to define an object variable for the new BLOG content, something like: const [blog, setBlog] = setState({ title: '', body: '', author: 'mario' }) then your inputs + textarea something like (take care that every element has a NAME attribute because this is how you can identify them later): mario yoshi now, you can set all of your elements with just one function, handleInput: const handleInput = (e) => { setBlog({ ...blog, [e.target.name]: e.target.value }) } a) You need to be familiarized with the JS concept of destructuring, so "...blog" means we're getting all properties of "blog" (title, body, author) in a new element, not "blog" per se because it's immutable. b) [e.target.name] is basically: title or author or body. You need to understand that (e) is the event on the form elements. "e.target" is every element per se: the input, the select and the textarea. Then, "e.target.name" is the name of the element, so it's respectively: title, author and body. c) e.target.value: is the current value of the input, the select and the textarea. To finalize, when you need to post, you don't have to declare a new variable as in the video, you just post "blog": fetch(url, { method: 'POST', headers: 'Content-Type: application/json', body: JSON.stringify(blog) }) React needs you're familiar with some kind of JS concepts like deconstructuring; in the same way you will use .map() a lot to mapping arrays to construct DOM elements. At the end it's just practice, practice and more practice.
@yashrdoshi
@yashrdoshi 3 жыл бұрын
Woohoo !!! 3:08
@karthifairhawn9825
@karthifairhawn9825 3 жыл бұрын
3:08 fun Wo wo
@learnwithpikes
@learnwithpikes 3 жыл бұрын
great man always like your content. make a playlist on php latest one
Full React Tutorial #28 - Submit Events
2:52
Net Ninja
Рет қаралды 167 М.
Please Help Barry Choose His Real Son
00:23
Garri Creative
Рет қаралды 22 МЛН
The Giant sleep in the town 👹🛏️🏡
00:24
Construction Site
Рет қаралды 20 МЛН
Алексей Щербаков разнес ВДВшников
00:47
Comfortable 🤣 #comedy #funny
00:34
Micky Makeover
Рет қаралды 17 МЛН
React JS Forms | Controlled Inputs | Learn ReactJS
37:32
Dave Gray
Рет қаралды 35 М.
Why I avoid react's uncontrolled inputs
13:06
Web Dev Cody
Рет қаралды 14 М.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
Fireship
Рет қаралды 737 М.
You might not need useEffect() ...
21:45
Academind
Рет қаралды 157 М.
Handling Complex Multiple Input Form States in React [2 LINES ONLY]
6:57
7 better ways to create a React app
7:08
Fireship
Рет қаралды 538 М.
React vs Angular in 2024
9:00
Kodaps Academy
Рет қаралды 45 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,5 МЛН
Please Help Barry Choose His Real Son
00:23
Garri Creative
Рет қаралды 22 МЛН