Manage State Locally First: Input Not Storing Locally

Tell us what’s happening:

I have tested variations on this code and am still getting the error “The input element should render the value of input in local state.” when I run the tests. I even double checked my work against solutions in the forums and don’t see a difference so not sure why its not passing?

PS - I have tried in Chrome, Firefox, and Edge. In the preview, my code functions as expected (except the input text does not clear, but that is passing test so not sure about that either)


Your code so far

class DisplayMessages extends React.Component {
  constructor(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) {

  submitMessage(event) {
    const nowMsg = this.state.input;
      messages: this.state.messages.concat(nowMsg),
      input: ''

  render() {
    const msgList = => <li>{msg}</li>)
    return (
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange} value={this.state.value} /><br />
        <button onClick={this.submitMessage} value="submit">Add a Message</button>
        <br />
        { /* change code above this line */ }

Your browser information:

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

Link to the challenge:

You are very very close, hint: double check your input element’s value vs the component state’s.

Aaahhhhhhhhhh! Thank you very much!