Full React Tutorial #27 - Controlled Inputs (forms)
ฝัง
- เผยแพร่เมื่อ 27 ก.ย. 2024
- 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
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.
God*
/* 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;
}
thx
thanks king
Thank you good sir!
You dropped this 👑, king
thank you
Off-topic, but can you show your desk setup?
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 !!!
I'm reading your recap in every video. That's really useful !!
@@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...
@@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.
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.
Thank you so much, having such quality content for free is mindblowing
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.
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.
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 TH-cam 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. 💪
Good luck
Got the job! Gonna sign up for the Udemy course.😎
@@TheRahulDBZ Thank you. Pretty stoked about it. 🚀
@@michaelandersen8570 any important tips you can give to someone like me who's looking to apply for jobs?
@@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.
This got to be the simplest explanation I've encountered.
Awesome video..
Thanks for sharing 👍
Thanks for watching Peter :)
Straight to the point. Thanks a lot!
I'm proud of net ninja
yaa me too...he is amazing at his work
even though i watched your videos before and coded with you. this coming back to them shows me more detail. thank you
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...
That is awesome to hear Mels :) your support is much appreciated!
Great tutorial of controlled inputs! I cannot thank you more!
Thanks Wenlong!
awesome mentor. I am sure he is really expert in this field .
A complex topic made simple. Very nice video!
Thanks!
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
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!
That's brilliant to know :) glad it helped!
@@NetNinja do you have router v6 in this project?
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.
Yes! Literally was just about to say this!!!
Not one to comment usually but this might just be the best explanation I've seen. Top quality content!
3:07 thats was the best uh uh i heard in my life
Net Ninja, You are a Legend!!!! Best of the Best
As always many thanks for teaching all these
Short and precise , I LOVE IT. 😍😍😍😍
this is some quality stuff bro, thanks for putting it on youtube for free 🤩
You have no idea how much I love your videos and how much they have helped me. Thank you for your service.
The best vieo on this subject. I spent 45 min looking until I found you. All others are inferior.
remember when this looked foreign fells nice being able to read through so fluently humans are amazing
thanks! this video just helped me !
Awesome! thanks for watching Rafael :)
Extremely helpful. Thank you very much
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.
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).
I don't know why I laugh with the yohoo! 😂
great video man
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?
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;
}
awesome work - once again
3:08 i really like that woohoo sound at 2x
Realy helpful series!!!
Thanks Jakub
3:05 Wohoo!! I love this small funny things 😍
Instead of using routing from react we can use fetching from backend ?
Thank You Brooo
TY Mate
Thank you so much
No problem :) hope it was helpful
Please cover all scenario like check box radio button and check tree view and complex form validation and getting response ,api crud operation
Is it possible to set the state for all your inputs at once with the onchange function 🤔?
For some reason my button add blogs isn't in the center, its aligned with the left side of the boxes
const [title, setTitle] = useState('')
const [body, setBody] = useState('')
const [author, setAuthor] = useState('mario')
This is so Good man 😁😁😁
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
why are there no tutorials on class components? ANYWHERE on the internet?
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.
Thanks!
Thanks for the support Nathan :) it's much appreciated
When i start type in the input i lost focus like input rerender and can type only once? Why is that?
Is it necessary to set the input value to the dynamic title/author state? It doesn't appear to do anything.
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
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 :)
Great tutorial!
Thanks Ninja
How can I use the public folder?
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 th-cam.com/video/Sklc_fQBmcs/w-d-xo.html&t. I hope I helped you , have a nice day
Do we need state management system such as redux for modern reactjs apps?
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.
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"
If you look at this video (th-cam.com/video/dzEieWaOJE0/w-d-xo.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.
so whenever any input field change happens whole form will be re rendered right? How to avoid that?
long live brother
I do not get what is the point of using value={title} in the input 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;
}
which plugin do you use to get the html autocomplete?
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
I did not know I can understand everything so easy. Thank you so much Shaun!
You are Great
pls where is the next tutorial and does it only stop at 27?
"whooohouuu" :D
I was a littile bit confused, because i haven't known that select has "value" property
why dont you create a course for react along with nextjs in udemy
Why do we need value then if we have state that gets the value onChange?
That is because when you make UseState(initialValue) in form you see initial Value in that field.
wooohooo
I'm coming from vuejs and v-model seems way simpler than this lol
great man always like your content.
make a playlist on php latest one
3:08 ooh wwwoh
3:08 😄
Why do we track what user types?
We don't "track", we update it to the state variable
Thanks Shaun🖤. But I think those react concepts very very basic which you told about it, I don't understand what is the main difference those two tutorials. Please prepare modern Redux tutorial that cover of the all topics in the documentation
3:08 fun Wo wo
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?
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) :)
@@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
@@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.
minute 3 very funny 🤣🤣🤣
i am the 5000th liker😁
Woohoo !!! 3:08
woohoo
3:10
I like British 😀
This is horrible. You have to do onChange every time you have a form. Why would anyone use react if it is this way?
It's not best tech but this is for learning purposes to grasp more idea about two directional binding. Here this style is used for demonstration purposes for this type of topic
@@marcisabele8057 so what's the proper way to do?
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!
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!!!!
But where to go from here after finishing this series?
Thanks!
Thanks for the support Julian! :)
/* 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;
}
I really love this accent ,keeps the video interesting
Thank you! 😃 I made it myself
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
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
/* 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;
}
/* 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;
}
/* 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;
}
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?
/* 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;
}
Hello there, just wanted to know when this playlist will be completed?
Awesome work BTW!
you sound like my project manager
@@TheRahulDBZ bruh😅
@@TheRahulDBZ lol😂