Manage state locally first - works, but tests fail

JavaScript
1

Hi.

I’m trying to solve https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first/ – and I don’t understand what’s wrong with my code. It appears to be working as intended, but most tests fail. I also get no errors. Any advice is greatly appreciated.

Code

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.submitMessage = this.submitMessage.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  // add handleChange() and submitMessage() methods here
  
  handleChange(ev) {
    this.setState({
      input: ev.currentTarget.value
    });
  }

  submitMessage() {
    this.setState({
      messages: [...this.state.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(m => <li>{m}</li>)}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};

Test output

  1. The input element should render the value of input in local state.
  2. Calling the method handleChange should update the input value in state to the current input.
  3. The submitMessage method should clear the current input.
  4. Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state.

Browser

I’m using Firefox 63.0b10 (64-bit) on Debian, I also tried Chromium 67.

2

It’s not currentTarget. It’s just target.

1 Like
3

Ok, thanks! I guess the problem has more to do with the tests than my solution :slight_smile: