How must working componentWillUnmount and why so bad explaination in that code? Why if you push twice the enter button , eventListener steel working

JavaScript
1

Tell us what’s happening:

   **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((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>
   );
 }
};

   **Your browser infor**

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

Challenge: Add Event Listeners

Link to the challenge:

2

Forgive me, but I’m not sure I understand.

How must working componentWillUnmount and why so bad explaination in that code?

I don’t understand your question. I will say that there are times to use CWU and times not to use it. If you feel the explanation is innadequate, it would be a good idea to get in the habit of consulting the documentation. This is something you will be doing all the time as a developer so it will be good to get in the habit.

As to the quality of the instruction, this is an open source curriculum supported by a lot of volunteers. If you have suggestions, you are more than welcome to make them.

Why if you push twice the enter button , eventListener steel working

I’m not clear what you mean, but I was not able to duplicate this. I’ve seen things like that before, but I can’t see it here. Unless you want to be more specific, I’d have to assume that it is a result of whatever browser you are using.

3

I don’t think the component is actually unmounted by the test so the event listener keeps working (It might also just re-render anyway after the test).

If you change it to say componentDidUpdate instead it would stop working after the first button press.

You might also be able to simulate an unmount of the component

handleKeyPress(event) {
  if (event.keyCode === 13) {
    this.handleEnter();
    setTimeout(() => {
      ReactDOM.unmountComponentAtNode(document.querySelector('#root'));
    }, 2000) 
  }
}

Tests:

The keydown listener should be removed from the document in componentWillUnmount.

assert(
  (() => {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    const willUnmountString = mockedComponent
      .instance()
      .componentWillUnmount.toString();
    return new RegExp(
      'document.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this.handleKeyPress'
    ).test(willUnmountString);
  })()
);
4

Thank you for this explanation.I understand how it work.

24 марта 2021, 19:35:20, от “Lasse via The freeCodeCamp Forum” < freecodecamp@discoursemail.com >:

5

Hi Kevin in this case I did not see how this method works. Now I have known.

24 марта 2021, 16:30:20, от “Kevin Smith via The freeCodeCamp Forum” < freecodecamp@discoursemail.com >:

6

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