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:

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]

5

thank you very much sir. I really appreciate

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.