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;

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed . your handleAction dosent do anything to unmout the page ! — Omar Berrami, Sep 01 '20 at 03:33
@OmarBerrami I'm new to react. can you help how to call to unmount the quote — Shekar, Sep 01 '20 at 03:50
Wrap it parent component and render it conditionally like this `{ someBoolean&&}` — Aleks, Sep 01 '20 at 03:55
@Shekar so as i understand you dont want to unmount the whole component , you only one to not show quote ? — Omar Berrami, Sep 01 '20 at 03:56
@OmarBerrami I want to remove(unmount) the q tag using componentWillUnmount() — Shekar, Sep 01 '20 at 04:06
componentWillUnmount() doesn't do that tho. if you want to remove just quote, add another variable to state and then conditionally render `{ this.state.showQuote&&{this.state.quote}}` — Aleks, Sep 01 '20 at 04:19

score 0 · Answer 1 · answered Sep 01 '20 at 04:18

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;

condition componentWillUnmount() in reactjs

1 Answers1