Remove method not working correctly

handleRemove method is working only once but handleEnter working infinite times , why ?

  **Your code so far**

class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    message: ''
  };
  this.handleEnter = this.handleEnter.bind(this);
  this.handleRemove = this.handleRemove.bind(this);
  this.handleKeyPress = this.handleKeyPress.bind(this);
}
// Change code below this line
componentDidMount() {
  document.addEventListener("keydown",this.handleKeyPress)
}
componentWillUnmount() {
  document.removeEventListener("keydown",this.handleKeyPress)
}
// Change code above this line
handleRemove() {
  this.setState((state) => state.message = "removed");
console.log(this.state)
}
handleEnter() {
  this.setState((state) => ({
    message: state.message + ' You pressed the enter key! '
  }));
console.log(this.state)
}
handleKeyPress(event) {
  if (event.keyCode === 13) {
    this.handleEnter();
  }else if(event.keyCode ==69){
    this.handleRemove();
  }
}
render() {
  return (
    <div>
      <h1>{this.state.message}</h1>
    </div>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Add Event Listeners

Link to the challenge:

The code in handleEnter is concatenating, the code in handleRemove is not. It does keep working you just can’t see it in the DOM.

You can change the method to do concatenation.

handleRemove() {
  this.setState((state) => ({
    message: state.message + ' removed '
  }));
  console.log(this.state)
}

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