React and Redux - Manage State Locally First

JavaScript
1

What’s wrong with my code? The result is exactlt the same as what expected, but it doesn’t pass. Or the section is problematic?

  **Your code so far**

class DisplayMessages extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    messages: []
  }
}
// Add handleChange() and submitMessage() methods here
handleChange=(event)=>{
  const {input, messages}=this.state;
  this.setState({input:event.target.value, messages:[...messages]})
}
submitMessage=()=>{
  let inputBox=document.querySelector('#input');
  const {input, messages}=this.state;
  if(input.trim()===''){
    alert('You typed in nothing!')
  } else {
    this.setState({input:'', messages:[...messages,input]});
  }
  inputBox.value='';
}
render() {
  return (
    <div>
      <h2>Type in a new Message:</h2>
      
      { /* Render an input, button, and ul below this line */ }
      <input id='input' type='text' onChange={this.handleChange}/>
      <button onClick={this.submitMessage}>Add message</button>
      <ul>
        {
          this.state.messages.map(message=>{
            return <li>{message}</li>
          })
        }
      </ul>
      <h3>{this.state.input}</h3>
      { /* 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/103.0.0.0 Safari/537.36

Challenge: React and Redux - Manage State Locally First

Link to the challenge:

2

For an input element to be a controlled element, it should have the value property set to a state variable, in this case, this.state.input

3

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