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 trial

JavaScript React Components (2018) Managing State and Data Flow Adding Items to State

Posted by Tyler Garner
Tyler Garner
1,623 Points

State 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
Sean Paulson
6,669 Points
Sean Paulson
Sean Paulson
6,669 Points

can you post your code?

Tyler Garner
Tyler Garner
1,623 Points
Tyler Garner
Tyler Garner
1,623 Points

import 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)
seal-mask
.a{fill-rule:evenodd;}techdegree
Allan Cheow (he/him)
Full Stack JavaScript Techdegree Student 12,809 Points
Allan Cheow (he/him)
.a{fill-rule:evenodd;}techdegree
Allan Cheow (he/him)
Full Stack JavaScript Techdegree Student 12,809 Points

Hi 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>