Manage State Locally First - bizarre test results and trouble with the <ul>

JavaScript
1

Tell us what’s happening:

Hi, I’m having an odd problem. The only test I’m not passing is " Calling the method handleChange should update the input value in state to the current input."

The weird thing is that, as you can see, I’m logging these values in the console and to me it looks like the test should pass. The values match up after every keystroke in the input field. Also strange is that I’m pretty sure I should not be passing the test for rendering <li> elements because that’s not rendered correctly in the test window, but it shows me passing that test anyway.

I would love any help explaining why I don’t pass the handlechange test, why I do pass the list test, or how I can fix my list so that it really does render properly (instead of just passing the test while being broken).

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) {
    console.log(event.target.value);
    this.setState(Object.assign(this.state, {input: event.target.value}));
    console.log(this.state.input);
  }
  submitMessage() {
    let newMessages = this.state.messages.concat([this.state.input]);
    this.setState({input: "", messages: newMessages});
  }

  render() {
    const renderedMessages = this.state.messages.map(msg => "<li>" + msg + "</li>");
    //this might need to be converted to a string instead of an array ^ 
    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}>button</button>
        <ul>
          {renderedMessages}
        </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/75.0.3770.100 Safari/537.36.

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

2

You should use setState to manipulate the state in your methods. What’s the point of using object.assign there? You are directly assigning to this.state outside of a constructor, this is a big no no in react. Changing this will let you pass the handleChange test.

Lists work with arrays, so you are correct here in choosing a map … But you should use JSX to render proper html. Something like this works well:

<li>{msg}</li>

As for why are you passing the list test? Idk, probably because it’s not comprehensive enough… :stuck_out_tongue:

3

I mistakenly thought that Object.assign left the arguments untouched and returned a new object. The reason I did it is because I thought this.setState({input: event.target.value}) would erase the messages property in the state. So there were a couple things I misunderstood in a pretty big way here. Thanks!

1 Like