How to modify React component to use hooks? - reactjs

Question

Below is a login component without hooks. This component has two input fields and a submit button. How can we modify this component to use hooks and convert this component into a functional component that can use states?
import React from 'react';
import { userService } from '../services/user.services';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
submitted: false,
loading: false,
error: ''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
this.setState({ submitted: true });
const data = this.state;
userService.login(data.username, data.password)
.then(
user => {
const { from } = this.props.location.state || { from: { pathname: "/" } };
this.props.history.push(from);
}
);
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value });
}
render() {
const { ...data } = this.state;
return (
<div className="login-box">
<h1>Travel With Us</h1>
<form onSubmit={this.handleSubmit}>
<div className="text-box">
<i className="fa fa-user"></i>
<input type="text" name="username" defaultValue={data.username} onChange={this.handleChange} placeholder="Username" />
</div>
<div className="text-box">
<i className="fa fa-lock" />
<input type="password" name="password" defaultValue={data.password} onChange={this.handleChange} placeholder="Passward" />
</div>
<button className="btn" value="login">Sign in</button>
</form>
</div>
);
}
}
export default Login;

Answer 1

Below is the sample code which I have converted to use hooks.
import React, { useState } from 'react';
import { userService } from '../services/user.services';
const LoginHooks = (props) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [submitted, setSubmit] = useState(false);
let handleSubmit = function (e) {
e.preventDefault();
console.log(submitted);
setSubmit(true);
userService.login(username, password)
.then(
user => console.log(user)
);
};
return (
<div className="login-box">
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<div className="text-box">
<i className="fa fa-user"></i>
<input type="text" name="username" defaultValue={username} onChange={({target}) => setUsername(target.value)} placeholder="Username" />
</div>
<div className="text-box">
<i className="fa fa-lock" />
<input type="password" name="password" defaultValue={password} onChange={({target}) => setPassword(target.value)} placeholder="Passward" />
</div>
<button className="btn" value="login">Sign in</button>
</form>
</div>
);
}
export default LoginHooks;