Remove Event Listeners didn't work

JavaScript
1

Tell us what’s happening:
Hello
All tests pass but the code does not work as expected,
remove event Listeners don’t work

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);
  }
  // change code below this line
  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress)
  }
  componentWillUnmount() {
    document.removeEventListener("keydown",this.handleKeyPress)
  }
  // change code above this line
  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:69.0) Gecko/20100101 Firefox/69.0.

Link to the challenge:


mini
mini1261×591 67.3 KB
2

Im not as versed in React but doesn’t componentWillUnmount happen once you leave the page. So it would still set the message in the state until you leave the page.
Hopefully someone with more React experience can help out.

3

Nothing runs when you leave the page; the entire app is destroyed when that happens. componentWillUnmount runs when the component is about to be removed from the virtual DOM in a still-running app. It’s usually used to stop timers and other outside resources – basically it’s a destructor/finalizer.

It’s also not something you need for normal components… which leads me to a mini-rant: This particular challenge is absolutely ridiculous and wrong. React was created, in part, in order to get away from manually hooking up and destroying event listeners like this. The lesson is very much teaching the wrong way to use React, and should be removed from the curriculum.

1 Like
4

Well I definitely need to get back into React, I’ve worked in Vue mostly and haven’t really used anything like componentWillUnmount before. I was referencing more of leaving that component and rendering a new component not leaving the app, I did poorly write that.

5

Gotcha :+1:

I’ve been using Vue.js in a serious project for a few months now, and while it feels a little “dirtier” than React+JSX to write things with, I’m blown away by how powerful it is.

Anyhoo, the Vue equivalent to componentWillUnmount is beforeDestroy(). The diagram in this post is super useful, along with everything else on alligator.io:

6

Hi
I have made some research but I didn’t found any solution :

7

Sorry, I don’t mean to hijack this into a Vue thread. Let’s tackle the problem, shall we?

@OJL Could you describe what you mean when you say removing the event listeners didn’t work? Your code looks all right to me at first glance. Are any of the tests failing?

8

All tests pass but , when I keep clicking enter it seems like the eventListener hasn’t be removed.

9

You’re seeing the desired effect: the component on the page is still there when you hit enter, so it’s still listening. The listener gets removed in the componentWillUnmount method, which only gets called once the component gets removed. In this case, since there’s nothing on the page that will remove that component until you leave the page, it’ll never actually get run.

1 Like
10

Thank you.
That’s correct,
react docs say same thing.
“We also want to clear that timer whenever the DOM produced by the Clock is removed. This is called “unmounting” in React.”
“If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle method so the timer is stopped.”