Custom React Inputs to Speed Up Coding
When I started with ReactJS two years ago it was magic. I loved the way how you can build an app using different components. But working with inputs and the related states, specifically when you wanted to edit an item was not very convenient. Often I used several useStates to handle the inputs and soon I had a component with hundreds of lines.
Few days ago I came across a way to make it lots easier. The code then had fewer lines and helped me to code easier and more efficient. It was an article about custom inputs in React.
And here’s how it works.
Building a custom input
You create a function, I called it useInput, the way the author on StackOverflow named it. Type will help to define the desired content inside the input tag.
With useState which you import at the top of the file (import {useState} from react) you define the callable value and the way we set the value (setValue).
The next line defines a constant for the input tag and you add some attributes, among others value to display the value in our state, onChange with an event listener to set the value based on what you type into the input and the type based on the parameter named type.
Then we return an array with two items: value and input.
Using the custom input
When we have imported the function in the file where we want to use it, you can easily call it with a constant that is destructuring assignments from an array returned by useInput. Here we use {uservalue,userinput} to get the value and the input from our previously defined custom input.
But how do we use it now? It’s simple. You won’t believe your eyes. You simply use userinput inside your return and it will be displayed. Magic! And you can do the same with uservalue.
Tailoring custom inputs
You can of course tailor your custom inputs. When handling a form you probably want to clear an input field. Can you do that? Sure!
I have added one line.
And it works. Of course you need to return clearVal like you return value and input. But you can use it then in a function.
When you are now using it, you can trigger it on a button click.
We are naming our clearVal resetuser, because I too often mix both words — clearing and reseting — and call it inside handleClick. handleClick is an arrow function called when you click the button. And, voila, you can reset the value.
You can of course further customize your new inputs, add a label, placeholders and more. And it’s easier to handle and doesn’t let your code look like a mess.
Do you wish to easily deploy your app in the cloud? Before working with Node and React I relied on PHP which ran easily on many servers you can rent. But a cloud application requires AWS and its complicated interface, right? WRONG! With just a few clicks you can deploy your cloud app on Digital Ocean. It’s not risky. If you join now, you will get $200 in free credits. I tried it, I still love it.
I’m writing this tutorial to further improve my React knowledge and share what I have found while searching for solutions to my problems. By doing this, I can also better memorize what I have learned and improve my JS-related vocabulary. So, please be aware that I may make a mistake or two from time to time. If you find something, please add a comment. I may change it or other readers will be aware that there’s something wrong with the code. Thank you.
