Handling events of forms - reactjs

Question

I am new to React and I am trying to make a form I wrote this simple form
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', age:''};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleAgeChange = this.handleAgeChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleNameChange(event) {
this.setState({name: event.target.name});
}
handleAgeChange(event) {
this.setState({age: event.target.age});
}
handleSubmit(event) {
alert('Name was submitted: ' + this.state.value);
alert('Age was submitted: '+ this.state.age);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleNameChange} />
</label>
<label>
Age:
<input type="text" value={this.state.age} onChange={this.handleAgeChange}/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default Profile;
When I try it I can't write anything in the Name and the alert always shows me 'Name was submitted: undefined' 'Age was submitted: undefined'

Answer 1

You have a few typos in your code. For each of your handleChange functions, you should have event.target.value for the state value being set instead of the names of the fields.
Also in your alert function for the name, the value should be this.state.name instead of this.state.value.
Here is a complete working version:
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = { name: "", age: "" };
this.handleNameChange = this.handleNameChange.bind(this);
this.handleAgeChange = this.handleAgeChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleNameChange(event) {
this.setState({ name: event.target.value });
}
handleAgeChange(event) {
this.setState({ age: event.target.value });
}
handleSubmit(event) {
alert("Name was submitted: " + this.state.name);
alert("Age was submitted: " + this.state.age);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
value={this.state.name}
onChange={this.handleNameChange}
/>
</label>
<label>
Age:
<input
type="text"
value={this.state.age}
onChange={this.handleAgeChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<Profile / > ,
document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>