ReactJS: Creating a single input handler for multiple input controls

Coding In depth
May 17, 2020 · 3 min read

React is the component-based user interface library. While developing a component we need multiple inputs. React provide one-way data binding. So for multiple inputs we need multiple handlers. When components input controls increase we have to write multiple handler methods that can make code dirty and doing the same thing over and over. In this article, we will learn how to define a smart handler for multiple input controls.

Single Input Controls

<div class="row required-field"><div class="col-md-4"><label class="cus-form-label">Product Name</label><input class="form-control minimal" id="productName" name="productName"type={this.state.product.productName} value={this.state.product.productName} onProductNameChange={this.onChange} /></div></div>

For the above type of single handlers, we can define the handler method like the below code.

onProductNameChange = (e) => {const product = this.state.product;product.productName = event.target.value;this.setState({product: product});}

Multiple Input Controls

The trick is to define a single input handler like the below code. Here we are defining id and name for each input control. id and name should match with the input control model name. i.e. first we defined state property and then product. productID and productName should be the same in the input control name. Check the bold items in the below code snippet.

class ProductForm extends React.Component {state = {product: {productID:””,productName: “”,productCode: “”,productdescription: “”,}}onChange = (e) => {const value = e.target.value;const product = { …this.state.product, [e.target.name]: value };this.setState({ product});}render() {return (<form onSubmit={this.submitForm}><div class="row required-field"><div class="col-md-4"><label class="cus-form-label">Product ID</label><input class="form-control minimal" id="productID" name="productID"type={this.state.product.productID} value={this.state.product.productID} onChange={this.onChange} /></div></div><div class="row required-field"><div class="col-md-4"><label class="cus-form-label">Product Name</label><input class="form-control minimal" id="productName" name="productName"type={this.state.product.productName} value={this.state.product.productName} onChange={this.onChange} /></div></div></form>);}}

Using Curried Method

<div class=”row required-field”><div class=”col-md-4"><label class=”cus-form-label”>Product Name</label><input class=”form-control minimal” id=”productName” name=”productName”type={this.state.product.productName} value={this.state.product.productName} onChange={this.onChange('productName')} /></div></div>

Now write a curried handler. Curried handler accepts the property name and event as an input parameter.

onChange = (propertyName) => (e) => {const value = e.target.value;const product = { …this.state.product, [propertyName]: value };this.setState({ product});}

Other Controls

<div class=”row required-field”><div class=”col-md-4"><label class=”cus-form-label”>Product Category</label><select name=”productCategory” onChange={this.onChange} value={this.state.product.productCategory}><option value=”ct1">Category 1</option><option value=”ct2">Category 2</option></select></div></div>//Component Method.onChange = (e) => {const value = e.target.value;const product = { …this.state.product, [e.target.name]: value };this.setState({ product});}

Similarly we can use the same handler for a checkbox. Make the initial state of the checkbox true or false. The handle sets the toggle value inputted.

<div class=”row required-field”><div class=”col-md-4"><label class=”cus-form-label”>Product Availability</label><input class=”form-control minimal”type=”checkbox”name=”productAvailable”checked={this.state.product.productAvailable} value={this.state.product.productAvailable}onChange={this.onChange} /></div></div>

The complete component file is below. In this component for CSS I am using bootstrap for react.

Summary

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Coding In depth

Written by

Writing about Angular, React, JavaScript, Java, C#, NodeJS, AWS, MongoDB, and Redis related articles. Please follow, clap stories to motivate us writing more!

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Coding In depth

Written by

Writing about Angular, React, JavaScript, Java, C#, NodeJS, AWS, MongoDB, and Redis related articles. Please follow, clap stories to motivate us writing more!

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store