freeCodeCamp Challenge Guide: Manage State Locally First

Guide
1

Manage State Locally First

Hints

Hint 1

Bind the method calls in component attributes with this, e.g.

<input onChange={this.handleChange.bind(this)} value={this.state.input}/>

or the binding can be done beforehand

Hint 2

Pass event to handleChange() method declaration and note that event.target.value stores the input value.

Hint 3

You may wanna add the following <div> into render content to check if the handleChange() method is working.

<div>{this.state.input}</div>

Hint 4

spread operator ... can be used for array concatenation in submitMessage() method declaration.

Solutions

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

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

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