React JS input field not behaving as expected - reactjs

Question

I am creating a contact form using React JS and this is my code:
import React, { Component } from 'react';
export default class Create extends Component {
constructor(props) {
super(props);
this.onChangeFirstname = this.onChangeFirstname.bind(this);
this.onChangeLastname = this.onChangeLastname.bind(this);
this.onChangeMessage = this.onChangeMessage.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
person_firstname: '',
person_lastname: '',
message:''
}
}
onChangeFirstname(e) {
this.setState({
person_firstname: e.target.value
});
}
onChangeLastname(e) {
this.setState({
person_lastname: e.target.value
})
}
onChangeMessage(e) {
this.setState({
message: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
console.log(`The values are ${this.state.person_firstname}, ${this.state.person_lastname}, and ${this.state.message}`)
this.setState({
person_firstname: '',
person_lastname: '',
message: ''
})
}
render() {
return (
<div style={{marginTop: 10}}>
<h3>Contact Form</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>First Name: </label>
<input type="text" className="form-control"
onChange={this.onChangeFirstName}/>
</div>
<div className="form-group">
<label>Last Name: </label>
<input type="text" className="form-control"
onChange={this.onChangeLastname}/>
</div>
<div className="form-group">
<label>Message: </label>
<textarea className="form-control"
onChange={this.onChangeMessage}>
</textarea>
</div>
<div className="form-group">
<input type="submit" value="Submit" className="btn btn-primary"/>
</div>
</form>
</div>
)
}
}
Everything seems fine, but the code gives a wrong result.
When I enter the following,
I get the following result
No matter what I enter in the first name field, it is ignored and I get a blank in the result.
I tried moving the Lastname input field above the Firstname input field and I still get the first input (Lastname) as blank in the console.

Answer 1

i refactor your code and everything looks fine ...
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
export default class App extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
firstname: "",
lastname: "",
message: ""
};
}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onSubmit(e) {
e.preventDefault();
console.log(this.state);
this.setState({
firstname: "",
lastname: "",
message: ""
});
}
render() {
return (
<div style={{ marginTop: 10 }}>
<h3>Contact Form</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>First Name: </label>
<input
type="text"
name="firstname"
className="form-control"
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<label>Last Name: </label>
<input
type="text"
name="lastname"
className="form-control"
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<label>Message: </label>
<textarea
name="message"
className="form-control"
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<input type="submit" value="Submit" className="btn btn-primary" />
</div>
</form>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

you have a typo, onChangeFirstname should have a capital N onChangeFirstName