Add Event Listeners something is missing

JavaScript
#1

I don,t know why this won’t pass

  **Your code so far**

class MyComponent extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        message: ''
      };
      this.handleEnter = this.handleEnter.bind(this);
      this.handleKeyPress = this.handleKeyPress.bind(this);
}

componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress)
  }
componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress)
  }
handleEnter() {
    this.setState({
      message: this.state.message + 'You pressed the enter key! '
    })
  }
  handleKeyPress(event){
    if (event.keycode === 13){
      this.handleEnter();
    }

  }
  render(){
    return(
      <div>
      <h1>{this.state.message}</h1>
      </div>
    )
  }
}




  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Add Event Listeners

Link to the challenge:

#2

I suggest reviewing this challenge. When you are updating a state property that depends on the current value of the state property, you have to do something different.

EDIT: It seems you changed code outside of the areas designated by the comments. That is why your code is failing. It is still failing for the reason I mentioned above but if you would not have changed the original code outside of where specified, it would have worked.

#3

i think i have added the changes but i still don’t know what is missing

class MyComponent extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        message: ''
      };
      this.handleEnter = this.handleEnter.bind(this);
      this.handleKeyPress = this.handleKeyPress.bind(this);
}

componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress)
  }
componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress)
  }
handleEnter() {
    this.setState((state)=>({
      message: state.message + 'You pressed the enter key! '
    }))
  }
  handleKeyPress(event){
    if (event.keycode === 13){
      this.handleEnter();
    }

  }
  render(){
    return(
      <div>
      <h1>{this.state.message}</h1>
      </div>
    )
  }
}

[/quote]

#4

You have a small typo on this line. JavaScript is case-sensitive. You changed a line that was not supposed to be changed. You only should have changed code where indicated by the code comments.

1 Like
#5

thank you very much sir. I really appreciate