Destroy React Component (Unmounting Component)

Question

I would like to know how to destroy a component with React by clicking a button. I found a way out, but in my conception it is quite "gambiarrosa". I have a state called show and when click on close change the value of this.state.show to false, in the render() method I use a ternary if to render the component or not depending on the value this.state.show.

Mycomponent.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FontAwesome from 'react-fontawesome';

class MyComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show:true,
    };
  }

  closeComponent(){
      console.log("Destruir componente");
      var x = ReactDOM.findDOMNode(this);
      console.log(x);
      //ReactDOM.unmountComponentAtNode(this.container);
      this.setState({ show: false });
  }

  componentDidMount() {
  }

  componentWillUnmount() {
    clearInterval(this.state);
  }

  render() {
    return (
      this.state.show ?
      <div className="MyComponent">
        <h1>Mostrar componente</h1>
        <FontAwesome name="window-close-o" onClick={this.closeComponent.bind(this)}/>
      </div>
      : null
    );
  }

}

export default MyComponent;

This is really the only way out for what I need to do?

Componentfather.js

import React, { Component } from 'react';
import './ComponentFather.css';
import MyComponent from '../MyComponent/MyComponent'

class ComponentFather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "Adicionar Categoria",
      key: 0,
      matchs: [],
    };
  }

  componentDidMount(){

  }

  componentWillUnmount(){
    clearInterval(this.state);
  }

  buttonClicked(){
    var mat = this.state.matchs;
    this.state.key ++;
    mat.push(<Match key={this.state.key}/>);
    console.log(mat);
    this.setState({
      matchs: mat
    });
  }

  render() {
    return (
      <div className="ComponentFather">
        <h1>Events Information</h1>
        <MyComponent></MyComponent>
        <MyComponent></MyComponent>
        <MyComponent></MyComponent>
      </div>
    );
  }
}

export default ComponentFather;

Maincomponent

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import ComponentFather from '../ComponentFather/ComponentFather';
import Streaming from '../Streaming/Streaming';

//import {Grid, Row, Col, Clearfix} from 'react-bootstrap';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComponentFather />
        <Streaming />
      </div>
    );
  }
}

export default App;

index js.

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App/App';

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

ReactDOM.render(
  <App />,
  document.getElementById('main-container')
);

Answer 1

The way to disassemble a component is with ReactDOM.unmountComponentAtNode. This method accepts the DOM element on which the component is mounted. If you do not have an element reference you can pass ReactDOM.findDOMNode(this).parentNode as an argument.

So your method of destroying the component could be:

closeComponent() {
    console.log("Destruir componente");
    var container = ReactDOM.findDOMNode(this).parentNode;
    ReactDOM.unmountComponentAtNode(container);
}

If this component is inserted in another, it would be best to hide the element via parent component. Depending on the logic behind the state of the component.

In your case, how you’re doing is valid, so the component MyComponent is responsible for guarding its own state. And it would look like this: https://jsfiddle.net/5gjapobx/