React Context & Hooks Tutorial #11 - useState with Forms

Key Takeaways

okay then so now we've seen this use state hook in action now what I'd like to do is take that and apply it to some other kind of scenario for example working with forms so typically when a user type something into an input field in react what we like to do is keep track of what that user types in and put it into some kind of states property so we're going to do that now we're going to give the user a form to add a new song where they type in the title of the song and we're going to store that in a local state using this hook use state now to do it we're going to create a brand new component so let's call this new song form Jas and inside that we still need to import react we also want to import use state because we will need that hook and then I'm gonna do a stateless functional components tab we'll call this new song form and then inside here we want to return some kind of template so it's just gonna be a very simple formulas so we'll do our form tags then we'll do a label tag and this will say something like song name and then underneath that we need an input field that the user can type that song into so input the type is going to be equal to text and then we're also gonna make this required like so okay now finally we need a submit button so input type is equal to submit and the value is going to be equal to add song okay so now we have this little form right here what I'd like to do is nest this component inside the song list component at the bottom instead of this button so let us now say new song form press enter it's going to auto import that at the top for me and leave it at that save it let's go over to the browser and we can see this form right here now at the minute nothing's going to happen right but what we want to do now is attach some kind of event listener to this form right here so I'll say on submit and then set it equal to something and we'll define this function later on but we also want to track what our user types into this thing so we can do that in react by saying on change so whenever the value inside this change is ie whenever they start typing something in after each keystroke then this is going to fire a function right here as well now this function is just going to be an inline function that I'm going to write here an arrow function and we taking the event object now ultimately what we want to do inside this function right here is store what I user types in into some kind of local state now to use that local state we're going to use this hook use States so use States and we pass in an initial value for a bit of state that we want to use in our case it's going to be just an empty string then as a user types into this on every change after each keystroke then we want to update the state with whatever the user has typed in so remember we get back an array from this with two values the actual value which we'll call title and a function to update that which we'll call set title so we'll say Const and then square brackets is equal to use state the first one is called title the actual value then set title for the function to change that value so what we want to do inside this function right here is actually use set title to update this piece of state with whatever the user typed in at that moment in time so we're doing this on one line so we don't need those curly braces instead we'll just say set title and we want to pass in the value that's currently inside this input form so we'll use the event object then we'll say dot target to get this input field then dots value so that's going to get us the value of whatever is inside this input field at that moment in time and it's going to apply it to this thing this piece of state okay so we're now keeping this in synch with whatever is inside this input field now I'm also going to attach over here a Val profit or a value property rather and set it equal to title like so so we're setting it equal to whatever is in the state so to begin with when we first log the page that's obviously going to be nothing okay so now if I save this actually nothing yet is gonna happen because when we change this all we're doing is updating the state and we're not login anything out or anything like that so in fact let's create now a function to handle the submit so we'll call this handle submit and then up here we'll define that function so Const handle submit and set it equal to an error function we taking the event object and inside here the first thing I'd like to do is say e dot prevent default just to prevent that default action of the form when we submit a form and that is to refresh the page we don't want that to happen so we're stopping that right here and then what we'll do is just log out the title so whatever a user has typed into this input field so we'll say console dot log title okay so let me save this now and preview it in the browser over here so now as we type something in if we go to the console over here and press add song now we can see this is in the console so now it's working but what we need to do is take this and actually output it so we want to add it to this data in the song list over here so to do that to change this data we need a function which is going to take what a user types in here and then add it to this data so we already have a function here that we defined in the last lecture called add song and that takes all of the current songs have puts them in a new array plus a new one now it had codes the title but what we want to do now is output the title that we type in here so we can take that in as a parameter here we'll call it title and then we'll set title equal to title now I can use a bit of es6 shorthand for this because the property name and the value of the variable is the same so I can just say title like so and that does the same thing so we now need to pass this add song function into this new song form component so that we can call this function from this form component or peer when we submit the form and when we do that we pass in the title so it receives that title and then it adds it to the songs array so let's do that let's come down here and we'll say at song is equal to add song so we're just using a standard prop right here save that and then we need to accept it up here inside an object so that's song like so and then over here where we're currently logging it to the console instead we'll say add song and we want to pass in the title which is this bit of data which is kept in sync with what a user types into the field so let's save this and see if it works head over to the browser and I'll just say test press ENTER and it works and I can do something else I've sung it works cool now one thing I'd like to clear this field when a users type something in and pressed add song because at the minute if we want to add another one we'd have to delete that first then add it in so I want this to auto clear dead simple to do or we're gonna say is set title which is the function we can use to update this over here set title and we're going to change that back to an empty string and because this value of this input field is kept in sync with this piece of state when we do that and we update this piece of state then this input field is going to update as well with that empty string so let's save that and preview so testing yep it works one two three it works awesome so that's one nice use of use state to use it with input fields inside a component