function keyword in class based component and inChange event - reactjs

Question

Can anyone please help me understand if there's any issue with the below code snippet:
import React, { Component } from "react";
class AddContactForm extends Component {
constructor() {
super();
this.state = {
name: "",
email: "",
number: ""
}
}
handleOnChange(event) {
console.log("Hi");
console.log(event.target.id);
console.log(event.target.value);
}
render() {
return (
<React.Fragment>
<div className="mx-auto">
<div class="mb-3 row">
<label for="username" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" onChange={this.handleOnChange.bind(this)}/>
</div>
</div>
<div class="mb-3 row">
<label for="mobileNumber" class="col-sm-2 col-form-label">Mobile Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="mobileNumber" onChange={this.handleOnChange}/>
</div>
</div>
<div class="mb-3 row">
<label for="emailId" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="emailId" onChange={this.handleOnChange}/>
</div>
</div>
<button className="btn btn-primary w-25">Add</button>
</div>
</React.Fragment>
)
}
}
export default AddContactForm;
I am facing the problems below:
1 - unable to use function keyword with handleOnChange method
2 - none of my inputs are firing the onChange event. I am unable to get any logs in the console as added in HandleOnChange method.
Thanks.

Answer 1

In your constructor bind all the methods.
constructor() {
super();
this.state = {
name: "",
email: "",
number: ""
}
this.handleOnChange: this.handleOnChange.bind(this)
}
And in your inputs use like this
<input onClick={this.handleOnChange} />

Answer 2

You have few errors in your code aside from the one #Muhammad pointed out, some attribute names were altered in to avoid conflict for jsx so:
class became className
for became htmlFor with the label element a similar problem here.
It's also worth noting that, using arrow function is favored over using bind, so you create the function normally as an arrow function.
handleOnChange = (event) => {
console.log("Hi");
console.log(event.target.id);
console.log(event.target.value);
};
and make onChange call it.
onChange={this.handleOnChange}
You can refer for this codesandbox for a demo, you may also want to read these two questions here:
correct-use-of-arrow-functions-in-react
how-to-avoid-bind-or-inline-arrow-functions-inside-render-method