Manage State Locally First - Not Passing

Tell us what’s happening:
The Challenge is for us to modify the code and have the input be controlled through the state as well as render an unordered list with the submissions from the input( to sum it up). However i am not getting a pass.

Your code so far

class DisplayMessages extends React.Component {
  constructor(props) {
    this.state = {
      input: '',
      messages: []

    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  // add handleChange() and submitMessage() methods here
    this.setState({ input: })
    let updatedMessages = [...this.state.messages, this.state.input]
      messages: updatedMessages,
      input: ''

  render() {
    return (
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <form onSubmit={this.submitMessage}>
          <input onChange={this.handleChange} value={this.state.input}/>
          <button type='submit'>Add message</button>
          {this.state.messages.length > 0 &&
            i => <li>{i}</li>
        { /* 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/71.0.3578.98 Safari/537.36 OPR/58.0.3135.127.

Link to the challenge:

Hello @Hades14143, welcome to the forum :slight_smile:

I fear your code is not passing since you placed your input inside a form and call the submitMessage event on submit.

Even if the functionality is the same, I fear the test are strict about what they expect, and looks to me they expect a button with an onClick event, instead of a form with onSubmit.

Hope this helps :+1:

use onClick in button