How to handle multiple input controls in React JS ?

We can handle multiple inputs dynamically in React JS. Below is code snippet where we can access both userid and password fields at one time.

import React, { Component } from 'react';

class LoginForm extends Component {

username = React.createRef();

state = {

account: { username: '', password: '' }

};

handleSubmit = e => {

e.preventDefault();

//const username = this.username.current.value;

};

handleChange = ({currentTarget:input}) => {

const account = { ...this.state.account };

// account.username = e.currentTarget.value;

// alert(e.currentTarget.name);

account[input.name] =input.value;

this.setState({account});

}

render() {

const { account } = this.state;

return (

<div>

<div className="form-row">

<form onSubmit={this.handleSubmit}>

<div className="form-group col-md-12">

<label htmlFor="username">Email address</label>

<input

value={account.username}

onChange={this.handleChange}

id="username"

name="username"

type="email"

className="form-control"

aria-describedby="emailHelp"

placeholder="Enter email" />

<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>

</div>

<div className="form-group col-md-12">

<label htmlFor="password">Password</label>

<input

value={account.password}

onChange={this.handleChange}

name="password"

id="password"

type="password"

className="form-control"

placeholder="Password" />

</div>

<div className="form-check">

<input type="checkbox" className="form-check-input" id="Check1" />

<label className="form-check-label" htmlFor="Check1">Check me out</label>

</div>

<button type="submit" className="btn btn-primary m-2">Submit</button>

</form>

</div>

</div>

);

}

}

export default LoginForm;

Now destructure the above code to multiple reusable components.

loginForm.jsx

import React, { Component } from 'react';

import Input from './common/input';

class LoginForm extends Component {

// username = React.createRef();

state = {

account: { username: '', password: '' }

};

handleSubmit = e => {

e.preventDefault();

//const username = this.username.current.value;

};

handleChange = ({ currentTarget: input }) => {

const account = { ...this.state.account };

// account.username = e.currentTarget.value;

account[input.name] = input.value;

this.setState({ account });

}

render() {

const { account } = this.state;

return (

<div>

<div className="form-row">

<form onSubmit={this.handleSubmit}>

<Input name="username"

value={account.username}

label="Email address"

type="email"

onChange={this.handleChange} />

<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

<Input name="password"

value={account.password}

label="Enter your Password"

type="password"

onChange={this.handleChange} />

<div class="form-check">

<input type="checkbox" class="form-check-input" id="exampleCheck1" />

<label class="form-check-label" for="exampleCheck1">Check me out</label>

</div>

<button type="submit" className="btn btn-primary m-2">Submit</button>

</form>

</div>

</div>

);

}

}

export default LoginForm;

input.jsx

import React from "react";

const Input = ({ name, label, value, onChange, type }) => {

return (

<div className="form-group">

<label htmlFor={name}>{label}</label>

<input value={value}

onChange={onChange}

name={name}

id={name}

type={type}

className="form-control" />

</div>

);

};

export default Input;

Now, code looks simple and readable and works as usual before.