Manage State Locally First failing all tests

JavaScript
1

Tell us what’s happening:

I have no idea what’s wrong with this code, I’ve been trying to get it to run for about 30 minutes now and I’m failing all of the tests.

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 currInput = this.state.input;
    this.setState({
      input: "",
      messages: this.state.messages.push(currInput)
    });
  }
  render() {
    var messagesArr = this.state.messages.map(function(item) {
      return <li key={item}>{item}</li>
    });
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange}>{this.state.input}</input>
        <button onClick={this.submitMessage}>Click me!</button>
        <ul>{messagesArr}</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/68.0.3440.106 Safari/537.36.

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

2

Hi, you’re most of the way there. Two changes need to be made:

  1. When I initially run your code, I get the error “input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.” This can be avoided by changing <input onChange={this.handleChange}>{this.state.input}</input> to <input onChange={this.handleChange} value={this.state.input} />.

  2. The next error I see is “this.state.messages.map is not a function”, so I console.logged the array and found out that input wasn’t getting concatenated properly. You shouldn’t try to push onto the messages array in the state, as it should be treated as immutable. Instead, use one of the methods mentioned in this StackOverflow post. I personally went with:

    this.setState({ 
      input: "",
      messages: this.state.messages.concat([currInput])
    })

Hope this helps :slight_smile:

3

Yes! Thank you, I really should have realized that using push here would cause issues.

I find it weird that putting {this.state.input} directly in the <input> tag throws an error, because it worked that way for me for all the React challenges, but putting it inside the value attribute is obviously better practice anyway, so thank you for that.

May I ask what environment you used to run this in? FCC doesn’t give me proper errors like the ones you got and CodePen won’t even reliably run React code, despite me including the necessary plugins.

4

I ran it on FCC. See screenshot below for where to find the errors:

Untitled
Untitled1354×616 71.6 KB

For React errors, you have to click on the link to see the actual error.

5

Oh, I always assumed those were just generic links to React documentation so I never actually followed them. Silly me :sweat_smile:

Thank you again!

1 Like