React and Redux - Manage State Locally First

Tell us what’s happening:

why is my code not working?

Your code so far

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      messages: []
    }
  }
  // Add handleChange() and submitMessage() methods here
this.handleChange=this.handleChange.bind(this);
this.submitMessage=this.submitMessage.bind(this);
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 below this line */ }
<input onChange= {this.handleChange} value={this.state.input}></input>
<button onClick={this.submitMessage}>Submit</button>
<ul>{this.state.messages.map((item)=> <li key={item}>{item}</li>)}</ul>
        { /* Change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

React and Redux - Manage State Locally First

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      messages: []
    }
 ........   put them here......
}

you need to define the handleChange and submitMessage methods inside the class

It worked ! Thank you so much!

1 Like

#Bug in this code#
while setting the state in handleChange(). spread this.state.messages in the messages property as an array

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.