Help! Manage State Locally First Not Passing

JavaScript
1

Tell us what’s happening:
My code for this challenge is not passing the tests. I am getting error messages saying:
The submitMessage method should clear the current input.
Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state.

However, I cannot find any issues with my code as compared to pieces of solutions on other forum posts. What am I doing wrong?

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 newMessages = [...this.state.messages, this.state.input]
    this.setState({
      messages: newMessages,
      input: ''
    })
  }

  render() {
    const items = this.state.messages.map((item) => <li>{item}</li>)
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <form onSubmit={this.submitMessage}>
          <input value={this.state.input} onChange={this.handleChange}/>
          <button type="submit">Add message</button>
        </form>
        <ul>
          {items}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

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

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

2

Fixed the problem using code from “React and Redux: Use Provider to Connect Redux to React” challenge.

1 Like
3

Thank you @lauranichols. I was stuck in this challenge for a while. Can’t believe the solution is right there just 2 steps away.
Below is the solution for the confused ones.

Spoiler 
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() {
    let newMessages = [...this.state.messages, this.state.input];
    this.setState({
      input: '',
      messages: newMessages
    });
  }

  render() {
    let list = this.state.messages.map((message, key) => <li key={key}>{message}</li>);
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange} value={this.state.input} /><br />
        <button type="submit" onClick={this.submitMessage}> Add Message </button>
        <ul>
          {list}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};
1 Like