React Hooks Tutorial - 33 - useInput Custom Hook

welcome back everyone for our final example on custom hubs we are going to take a look at input elements as before we will tackle this in two parts in the first half we will write code without any custom hooks in the second half we will move some logic into a custom hook let's begin for this example we will implement a simple form where the user can submit their first name and last name I'm going to begin by creating a new file called user form dot j/s within the file I'm going to use the snippet RFC II to create a functional component we need two state variables for first-name and lastname so I'm going to import you state and create the two variables first name and last name next let's add the JSX I'm going to add a form tag and within the form tag we create input elements for first name and last name so div tag within the div tag a label tag the text is going to be first name and then an input element type is equal to text now let's duplicate this code for last name the next step is to convert these input elements into controlled components so for first name value is going to be equal to first name and on change is going to be equal to we get the event and set first name to event dot target dot value going to format this and then repeat the same for last name copy paste value is last name and on change set last name finally I'm going to add a submit button button submit and on the submit handler for the form on submit is equal to submit handler and we define this submit handler you get access to the event recall prevent default to stop the page from refreshing and then I will simply alert hello first name space last name alright that should do let's say the file included in Abdul Jess and test this out you can see that we have two input fields and the submit button if I enter Bruce Wayne and click on submit we get an alert hello Bruce Wayne pretty straightforward now let's create our custom hug what our custom hook has to do is sort of encapsulate this controlled component behavior for an input element that is binding the value and on change attributes let's see how within the hooks folder I'm going to create a new file called use input dot is within the file I'm going to use the snippet RFC e to add the boilerplate code again we don't return any JSX so there is no need to import react what we do need though is the U state hook next let's create a state variable which basically tracks the input fields value so value comma set value and the default value will be a variable called initial value which will be passed in as a parameter now that we have the value and the function to update the value let's add our own logic I'm going to create a function called reset which will set the value back to the initial value I will also create an object with two properties the first property is value which is set to value or we can use es6 shorthand syntax and specify just value and the second property is on change which is going to be a function that receives the event as a parameter and set the value to event dot target dot value finally we return three different things we return the value itself the bind object and the reset function now let's see how to incorporate this in our component I'm going to begin by calling the use input hook this will also auto import the hook at the top and this particular use input is to replace the you state call for the first name the initial value is an empty string so let's specify the same next we know that a call to use input returns three values let's destructure them the first item is the value of the input element which is first name the second item is the bind object which we are going to call as bind first name the final item is the reset function which we are going to call as reset first name this is going to be equal to use input now you can get rid of the you stayed calm similarly let's invoke use input again for the last name last name wind last name reset last name is equal to use input and the initial value is an empty string again make sure to delete the you stayed call now you can see that the values for first name and last name are already being used in the submit handler but how do we make use of the remaining two items well it's simple bind first name is going to replace the value and unchanged attributes for first name and bind last name is going to replace the value and unchanged attributes for the last name this is possible because the code is in fact one and the same value and unchanged value and unchanged when specifying as an attribute though we do have to use the spread operator dot dot dot bind first name dot dot dot bind last name now for the reset functions we can make use of them in the submit handler reset first name and reset last name and that is pretty much it let's save the files and take a look at the browser you can see that there is no change in the UI now when I try type in first-name and lastname it still works fine I click on submit we see the alert dialog and when we go back the two input fields are reset our use input custom hook works as expected and this is a slightly more complicated custom hook than the ones we have seen before but once you understand how it works it all starts to make sense and will become much easier to understand you might have realized by now that there are endless possibilities for creating custom hooks also there are tons of custom hooks already created by others but I would encourage you all to create a few to get a better understanding of react hooks well with that we come to the end of this series on react hooks if you guys enjoyed the series please to leave a like and share this playlist with your friends or teammates as always thank you guys for watching feel free to subscribe and until next time take care

Channel: Codevolution

Views: 84,826

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useInput Custom Hook in React, Custom Hooks, Custom Hooks in React

Id: 6am-yn3ZLEw

Length: 9min 45sec (585 seconds)

Published: Mon Aug 05 2019