Building a re-usable Input Component with React Hooks

There are still a ton of cumbersome ways of dealing with input when using anything other than React Hooks. Code can get really cumbersome and hard to understand. Gladly, it's really easy to create a re-usable Input Component with React Hooks that you can use throughout your application.

Table of Contents

Classic React Hooks Input Component Example

To better understand what I'm talking about, let's look at a classic React Hooks Input Component Example to make things more clear. We create this component right inside of our App.jsx.

If you deal with input and you are familiar with React Hooks, the simplest way of building one is this:

import React from 'react'; import {useState} from 'react' import './App.css'; function App() { const [inputValue, setInputValue] = useState("") const handleInputChange = (e) => { setInputValue(e.target.value) } return ( <main> <h2>Input: </h2> <h3>{inputValue}</h3> <input type="text" onChange={handleInputChange} value={inputValue} placeholder="Input" /> <button onClick={() => setInputValue("")}>Clear</button> </main> ); } export default App;
Code language: JavaScript (javascript)

While this is pretty easy to read compared to using Class-Based Components, you would still have to write a ton of repetitive code if you need to create multiple input fields throughout your application.

Now we can go ahead and create a re-usable input component with React Hooks that we can use anywhere we want.

As always, there is also a Repl for you to fork and play around with!

Creating the Re-Usable Input Component with React Hooks

First, let's make sure everything has its place. Create a new folder called hooks inside of your src folder.

Inside of /hooks create a file called formInputHook.jsx

Inside of that, we create a new component called initialValue (or whatever you want, it doesn't matter).

import { useState } from "react"; export default initialVal => { const [value, setValue] = useState(initialVal); const handleChange = e => { setValue(e.target.value); }; const reset = () => { setValue(""); }; return [value, handleChange, reset]; };
Code language: JavaScript (javascript)

Let's break this down a bit, what are we doing here? Well, basically the same as in the previous component, just more generalized.

First up we import our dependencies with import {useState} from 'react'

Then we basically do the same as we did before. We create a state variable and set it to initialValue: const [value, setValue] = useState(initialVal)

Next up we create our handleChange function: const handleChange = e => { setValue(e.target.value) }

And then, we create a function called reset that sets the state of our value to an empty string: const reset = () => { setValue("") }

Finally, we return the whole set of values: return [value, handleChange, reset]

Importing the Component to App.js

Now we have to go ahead and import this component to our App.js file. After that, we simply modify our code a little bit.

import React from 'react'; import {useState} from 'react' import formInputHook from './hooks/formInputHook' import './App.css'; function App() { const [inputValue, updateInputValue, reset] = formInputHook("") return ( <main> <h2>Input: </h2> <h3>{inputValue}</h3> <input type="text" onChange={updateInputValue} value={inputValue} placeholder="Input" /> <button onClick={reset}>Clear</button> </main> ); } export default App;
Code language: JavaScript (javascript)

So, what changes here? We import our formInputHook with: import {formInputHook} from './hooks/formInputHook'

Then, we create a state variable using the 3 values we export from our formInputHook component: inputValue, updateInputValue and reset as formInputHook("")

The whole state variable looks like this: const [inputValue, updateInputValue, reset] = formInputHook("")

We might as well import this as const [curryFlavor, updateCurryFlavor, reset] - it does not matter since it's only placeholder names. The actual action is going to happen in our formInputHook.jsx file.

Finally, we go ahead and we add our reset function to the onClick listener of our button with:<button onClick={reset}>Clear</button>

Now, we have exactly the same functionality as we had before.

So, why is this useful?

Because we now can use this as many times as we want, without the need of creating a hundred different states, change handlers, etc.

Re-usability

Now we can simply import this same component in any number of different components and re-use it as we like.

Let's say we want to add a little questionnaire about what our favorite flavor of curry is. Even we all know there is only one answer to that, let's use this example. I think this brings my point across.

So how does the code look like for this one? We only added a bit of code to our App.jsx

import React from 'react'; import {useState} from 'react' import formInputHook from './hooks/formInputHook' import './App.css'; function App() { const [inputValue, updateInputValue, reset] = formInputHook("") const [curryFlavor, updateCurryFlavor, resetFlavor] = formInputHook("") return ( <main> <h2>Input: </h2> <h3>{inputValue}</h3> <input type="text" onChange={updateInputValue} value={inputValue} placeholder="Input" /> <button onClick={reset}>Clear</button> <h2>What's your favorite Curry?</h2> <h3>{curryFlavor}</h3> <input type="text" onChange={updateCurryFlavor} value={curryFlavor} placeholder="Enter flavor" /> <button onClick={resetFlavor}>Clear</button> </main> ); } export default App;
Code language: JavaScript (javascript)

You can see that the only thing we change in regard to state variable is adding another state variable with slightly modified names: const [curryFlavor, updateCurryFlavor, resetFlavor] = formInputHook("")

This is why it is a great idea to use a separate component instead of writing a ton of repetitive code.

Conclusion

I thin this should bring my point across and demonstrates how useful re-usable input components with React Hooks really are.

Make sure to bookmark this blog and visit back regularly to check out new tutorials!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.