React and Redux: Manage State Locally First Help!

1

Hi all,

So my code seems to work as intended (as far as I can tell), but I’m only passing a small portion of the tests on React and Redux: Manage State Locally First and I have no idea what I’m doing wrong. Thanks!

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) {
    const  { name, value } = event.target
    this.setState ({
      [name]: value
    })
  }

  submitMessage() {
    const blankState = ''
    const updatedMessage = [this.state.input]
    this.setState ({
      messages: [...this.state.messages, updatedMessage],
      input: blankState
    })
  }


  render() {
    const listItems = this.state.messages.map(item => <li>{item}</li>)
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input 
          type="text"
          name="input"
          value={this.state.input}
          onChange={this.handleChange}
        />

        <button onClick={this.submitMessage}>
          Add Message
        </button>
        <ul>
          {listItems}
        </ul>
      </div>
    );
  }
};
2

I should check the test to be sure, but seems that they cannot pick up name from the event.target.

If you switch to an explicit declaration seems be more compliant with the test:

   this.setState ({
      input: value
    })

Also, your submitMessage has an error, you will add a new array into messages:

    const updatedMessage = [this.state.input] // an array
    this.setState ({
      messages: [...this.state.messages, updatedMessage],
    })

Hope it helps :+1:

1 Like
4

Yes! Thank you that made perfect sense and most definitely helped! :+1: