React and Redux: Manage State Locally First: Value={this.state.input}

JavaScript
1

Tell us what’s happening:
Hello, I don’t fully understand what is happening with “value={this.state.input}”.

The code is working fine but If you someone could please explain what this code is doing exactly that would be helpful. Is it being passed as the prop to “event.target.value”?

Thanks for the help!

-Travis

Your code so far


class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  // add handleChange() and submitMessage() methods here
  handleChange(event) {
    this.setState({input: event.target.value})
  }

  submitMessage() {
    this.setState({
      messages: this.state.messages.concat(this.state.input),
      input: ''
    })
  }

  render() {
    const list = this.state.messages.map((m) => <li>{m}</li>)
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input value={this.state.input} onChange={this.handleChange}></input>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>{list}</ul>
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first

2

Sounds like you might need to review how props are passed to html elements in much the same way props are passed to components. Input elements have a value attribute which stores the current value of the elements. This is just plain html concept and React let’s you interact with these types of built-in elements.

The current value of the state property input (this.state.input) is being passed as a prop to the input element not event.target.value

1 Like
3

@camperextraordinaire I understand how props are passed to HTML element using JSX, I did not know, or I forgot that input has a value attribute. I understand what is going on now. Thank you!