Full React Tutorial #27 - Controlled Inputs (forms)
Vložit
- čas přidán 18. 01. 2021
- 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/iamshaunjp/Complet...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 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?
Thank you so much, having such quality content for free is mindblowing
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.
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).
even though i watched your videos before and coded with you. this coming back to them shows me more detail. thank you
I did not know I can understand everything so easy. Thank you so much Shaun!
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?
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
Short and precise , I LOVE IT. 😍😍😍😍
Straight to the point. Thanks a lot!
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 CZcams 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.
Extremely useful and simple explanation, thank you!
awesome mentor. I am sure he is really expert in this field .
splendid narration, neat and clear, top!
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?
Not one to comment usually but this might just be the best explanation I've seen. Top quality content!
You have no idea how much I love your videos and how much they have helped me. Thank you for your service.
this is some quality stuff bro, thanks for putting it on youtube for free 🤩
As always many thanks for teaching all these
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!!!
Extremely helpful. Thank you very much
I'm proud of net ninja
yaa me too...he is amazing at his work
This got to be the simplest explanation I've encountered.
Awesome video..
Thanks for sharing 👍
Thanks for watching Peter :)
Net Ninja, You are a Legend!!!! Best of the Best
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?
awesome work - once again
Great tutorial of controlled inputs! I cannot thank you more!
Thanks Wenlong!
3:07 thats was the best uh uh i heard in my life
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!
This is much better than a paid tutorial..EXCELLENT JOB NET NINJA
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 :)
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 mr for saving me from headache
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
A complex topic made simple. Very nice video!
Thanks!
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
The best vieo on this subject. I spent 45 min looking until I found you. All others are inferior.
great video man
This is so Good man 😁😁😁
I really love this accent ,keeps the video interesting
Thank you! 😃 I made it myself
Realy helpful series!!!
Thanks Jakub
Very good stuff. Save my day.
Glad to hear it! Thanks for watching Adam :)
You're the goat
3:05 Wohoo!! I love this small funny things 😍
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?
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.
Please cover all scenario like check box radio button and check tree view and complex form validation and getting response ,api crud operation
Do we need state management system such as redux for modern reactjs apps?
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
TY Mate
Thanks ninja
Is it possible to set the state for all your inputs at once with the onchange function 🤔?
Can we use same id in different components , I mean if I have a in Home and in BlogDetails, is it valid?
remember when this looked foreign fells nice being able to read through so fluently humans are amazing
Very useful
Instead of using routing from react we can use fetching from backend ?
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;
}
I don't know why I laugh with the yohoo! 😂
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😂
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
Is it necessary to set the input value to the dynamic title/author state? It doesn't appear to do anything.
You are Great
so whenever any input field change happens whole form will be re rendered right? How to avoid that?
which plugin do you use to get the html autocomplete?
thanks brow
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 czcams.com/video/Sklc_fQBmcs/video.html&t. I hope I helped you , have a nice day
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 (czcams.com/video/dzEieWaOJE0/video.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.
Thank you so much
No problem :) hope it was helpful
For some reason my button add blogs isn't in the center, its aligned with the left side of the boxes
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 your support Jochen, it's much appreciated!
3:08 i really like that woohoo sound at 2x
woohoo!
When i start type in the input i lost focus like input rerender and can type only once? Why is that?
ty
Quick question: if we set a state using const, how come later on we can update that value? const values cannot be updated
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
Watch the useState video again, he already explained there
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.
why are there no tutorials on class components? ANYWHERE on the internet?
3:08 ooh wwwoh
const [title, setTitle] = useState('')
const [body, setBody] = useState('')
const [author, setAuthor] = useState('mario')
i like your yuuhuu in the video HAHAHA
why dont you create a course for react along with nextjs in udemy
"whooohouuu" :D
wooohooo
I was a littile bit confused, because i haven't known that select has "value" property
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
Is it possible to use "useState" one time for all inputs?
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.
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.
long live brother
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
.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 do not get what is the point of using value={title} in the input form!!!
minute 3 very funny 🤣🤣🤣
pls where is the next tutorial and does it only stop at 27?
great man always like your content.
make a playlist on php latest one
3:08 fun Wo wo