Manage State Locally First --

JavaScript
1

Tell us what’s happening:
Their is a weird text in the console and I have no idea what to do, what can I do, please help me.

// running tests
Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
// tests completed


```end of message in the console


**Your code so far**

```jsx

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(e) {
    this.setState({
      input: e.target.value
    });
  } 
  submitMessage() {
    this.setState({
      messages: [...this.state.input],
      input: ''
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input 
          value={this.state.input}
          onChange={this.handleChange}
        />
        <button
          onClick={this.submitMessage()}
        >Add message</button>
        <ul>
          {this.state.messages.map((n)=><li>{n}</li>)}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first

2

You should not be calling the this.submitMessage method. Instead, just pass it without calling it.

Your submitMessage should be adding this.state.input to the this.state.message array and then assigning back to the messages property. Instead, you are assigning the messages property an array of the characters which was created when you used the spread operator on this.state.input.

Think about how you could either use the concat method or the spread operator something other than this.state.input to assign the messages property a new array which contains all of the elements current in state with the current value of this.state.input attached to the end.

Although not has elegant, you could even use the push method to accomplish this part.

3

thank you alot for the advice