1class DisplayMessages extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      input: '',
6      messages: []
7    }
8  }
9  // add handleChange() and submitMessage() methods here
10  handleChange(event){
11    this.setState({
12      input: event.target.value,
13      messages: this.state.messages
14    })
15  }
16
17  submitMessage(){
18    this.setState({
19      input: '',
20      messages: [...this.state.messages, this.state.input]
21    })
22  }
23
24  render() {
25    return (
26      <div>
27        <h2>Type in a new Message:</h2>
28        { /* render an input, button, and ul here */ }
29        <input onChange={this.handleChange.bind(this)} value={this.state.input}/>
30        <button onClick={this.submitMessage.bind(this)}>Submit</button>
31        <ul>
32          {this.state.messages.map((x, i)=>{
33            return <li key={i}>{x}</li>
34          })}
35        </ul>
36        { /* change code above this line */ }
37      </div>
38    );
39  }
40};
41