Manage State Locally First Help require

Need some help as last two parts of this test are failing and can’t figure out what is wrong, please help, thanks

class DisplayMessages extends React.Component {
  constructor(props) {
    this.state = {
      input: '',
      messages: []
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);

handleChange(event) {
  submitMessage() {
   let newMessages = [... this.state.messages.this.state.input]
     messages: newMessages,
     input: ''
  // add handleChange() and submitMessage() methods here

  render() {
    return (
        <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.state.submitMessage}>Add Message</button>
      { => <li>{msg}</li>)}</ul>

        { /* change code above this line */ }

Here is the original link


Bug0/Hint 0: Check you button click event, make sure it’s calling the correct function. if you place a console.log("submit btn"); in your submitMessage, you will find out this function is never called actually by button click, so it seems button has faulty function reference.

Bug1/Hint 1: Once you fixed the submit message function reference, if you add console.log(this.state.messages); to log the messages in submit button you will find out the new message won’t pushed to the messages. Find the issue where you tried to add new message to the messages

Very simple to fix, one wrong referencing, and maybe one typo?

Feel free to ask for more hint, but it’s easy, you can do it.

Happy coding.

1 Like

I changed button reference but its still not passing

<button onClick={this.submitMessage}>Add Message</button>

Good proceed to next bug (bug1)

This was the error, this should be a coma after messages. Many thanks

[... this.state.messages, this.state.input]