React/Redux - Manage State Locally First

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

Could somebody me figure it out, I completed all the tasks required for this test, but still get an error, where did I miss something?

Error message: The DisplayMessages component should render a div containing an h2 element, a button element, a ul element, and li elements as children.

  **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 value={this.state.input} onChange ={this.handleChange}/>
<button onClick={this.submitMessage}>Submit!</button>
<ul>
{this.state.messages.map((x,i)=>{
return <li key={i}>{x}</li>
})}
</ul>
<div>{this.state.input}</div>
      { /* 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/92.0.4515.131 Safari/537.36

Challenge: Manage State Locally First

Link to the challenge:

2

Hi @jacob.o !

You seem to have an extra line here

When I get rid of it, the test passes

1 Like
4

Now everything is clear, appreciate, I added this line ({this.state.input}) to see what the user is typing live. I also suspected that the test did not allow me to pass because of the extra

, I even commented out this line // when I tried rechecking, but as you correctly suggested, I just had to delete the line.

5

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