Help! Manage State Locally First

JavaScript
1

Tell us what’s happening:
Not sure why this code is not passing, is there something I’m missing?

Your code so far


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

Your browser information:

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

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

2

Hi @AjeaSmith

You’re using the class properties syntax in the form of arrow functions for handleChange and submitMessage. These are proposed language features and aren’t in the ES6 syntax.

To transpile them properly you’d need the transform-class-properties plugin from babel. However, I’m guessing FCC doesn’t support them because you can see a syntax error in the console.

You need to change them to the normal way of declaring class methods (you already have the bindings in the constructor, which is what the arrow function syntax would stop you from needing to declare).

1 Like