Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTyler Garner
1,623 PointsState Value of AddPlayerForm not updating on text input
This was something I noticed in the previous video, but wanted to move forward to see if it would cause any issues with the project. Entering text in the Add Player input is not updating the value state of the AddPlayerForm. The state is remaining blank no matter what value is in the textbox. Submitting the form creates a new player as intended, but the text is missing, leaving a blank space where the player name belongs.
3 Answers
Sean Paulson
6,669 Pointscan you post your code?
Tyler Garner
1,623 Pointsimport React, {Component} from 'react';
class AddPlayerForm extends Component {
state = {
value: ''
};
handleValueChange = (e) => {
this.setState({value: e.target.value });
}
handleSubmit = (e) => {
e.preventDefault();
this.props.addPlayer(this.state.value);
}
render() {
console.log(this.state.value)
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Enter a player's name"
/>
<input
type="submit"
value={this.state.value}
onChange={this.handleValueChange}
/>
</form>
);
}
}
export default AddPlayerForm;
I'm not sure if the error lies in the AddPlayerForm component
Allan Cheow (he/him)
Full Stack JavaScript Techdegree Student 12,808 PointsHi Tyler Garner , not sure if you figured out this issue. It seems you may have added the "value" and "onChange" to the wrong input tag.
The markup for form should look like this:
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.value}
onChange={this.handleValueChange}
placeholder="Enter a player's name"
/>
<input type="submit" value="Add Player" />
</form>