condition componentWillUnmount() in reactjs

Question

When clicking on button, quote should unmount using componentwillunmount() but I checked by logging to console, unmount not at all running.

import React from "react";

import "./App.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      quote: ""
    };
  }

  handleAction = () => {
    this._isRemoved = true;

    console.log("Clicked");
  };

  componentDidMount() {
    this._isRemoved = false;

    if (!this._isRemoved) {
      this.setState({ quote: "Something" });

      console.log("Mounted");
    }
  }

  componentWillUnmount() {
    this._isRemoved = true;

    console.log("Unmount");
  }

  render() {
    return (
      <div className="App">
        <div>
          <q>{this.state.quote}</q>
          <br />

          <button onClick={this.handleAction}>Click Here</button>
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

The unmount it's called when you change the page or somthing that the whole component will disappear .

you can simply hide or show your element like this example :

import React from "react";

import "./App.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      quote: "",
      _isRemoved :false
    };
  }

  handleAction = () => {
    this.setState({
      _isRemoved : true
    })
    console.log("Clicked");
  };

  showAction = () => {
    this.setState({
      _isRemoved : false
    })
    console.log("Clicked");
  };

  componentDidMount() {

    this.setState({ quote: "Something" });

    console.log("Mounted");
    
  }

  componentWillUnmount() {
    this._isRemoved = true;

    console.log("Unmount");
  }

  render() {
    return (
      <div className="App">
        <div>
          {!this.state._isRemoved &&
            <q>{this.state.quote}</q>
          }
          <br />

          <button onClick={this.handleAction}>Hide</button>
          <button onClick={this.showAction}>Show</button>
        </div>
      </div>
    );
  }
}

export default App;