Redux-react second challenge: wht's wrong?

JavaScript
1

Hi,
I managed to write the code and it looks like working but it doesn’ t pass a test saying that " The input element should render the value of input in local state".
Can someone explain me what is wrong?

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.handleChange=this.handleChange.bind(this);
    this.submitMessage=this.submitMessage.bind(this);

  }
  // Add handleChange() and submitMessage() methods here
  handleChange (event){    
    this.setState(
      {input: event.target.value})  
  }

  submitMessage() {    
    let arr = [...this.state.messages,this.state.input];
    this.setState({
      messages: arr,
      input: ""});  
      document.querySelector('input').value= "";  } 
    

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
          <input type="text" onChange={this.handleChange} />        
          <button onClick={this.submitMessage} >Add message</button>              
          <ul>        
          {this.state.messages.map(msg => <li>{msg}</li>)}        
          </ul>
        { /* Change code above this line */ }
      </div>
    );
  }
};
2

It is saying that you need a controlled input. Normally the input handles itself what it renders. That is what you currently have:

<input type="text" onChange={this.handleChange} />

The input comes with a value attribute that will tell it what is in it, override it’s internal workings. If I wanted to tell an input to always show the string “howdy” in the input, I would have something like:

<input type="text" onChange={this.handleChange} value={ 'Howdy' }/ >

You need to do something similar, but instead use a variable. They want you to use the input string that you are saving on the component state.

You’re right that the effect is the same to what you’ve done. But under the covers, React is in control, which will become important later.

3

Thank you very much.
I really didn’t get that they wanted me to addirittura value attribute on the imput element😅

4

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