react.js: removing a component

Question

I'm fairly new at react.js, so any help is greatly appreciated.

I have this: https://jsfiddle.net/rzjyhf91/

Wherein I have made 2 components: an image and a button.

The goal is to remove the image with a click of the button, I use unmountComponentAtNode for that, but it does not work:

var App = React.createClass({
  render: function() {
    return (
    <div><MyImage /><RemoveImageButton /></div>
    );
  }
});

var MyImage = React.createClass({
  render: function() {
    return (
      <img id="kitten" src={'http://placekitten.com/g/200/300'} />
    );
  }
});

var RemoveImageButton = React.createClass ({
  render: function() {
    return (
      <button onClick={this.handleClick}>remove image</button>
    )
  },
  handleClick: function(){
    React.unmountComponentAtNode(document.getElementById('kitten'));   
  }
});

React.render(<App />, document.body);

How can I remove a react component from another component?

wow, this seems to be a bug... you should have done something like this: <div><div id="someid"><MyImage /></div><RemoveImageButton /></div> and then unmount on the "someid"... but this doesnt work either. I think you would have to forceUpdate() the App component or something... — Max Bumaye
– Max Bumaye, Commented Dec 1, 2014 at 13:02
I don't know the answer, but I would set the image as the state of the App, and then change/remove the state's value which triggers a re-render. — Daniel Apt
– Daniel Apt, Commented Dec 1, 2014 at 14:06

Syscall · Accepted Answer · 2021-04-21 14:41:34Z

48

Well, it seems you should rethink how the display control is handled. React is all about isolated components, and so, you shouldn't be unmounting a component that is mounted by a parent component. Instead, you should use a callback passed down through props to accomplish something like that.

Your actual implementation will depend on your use case, but an updated version of your example that works is at: https://jsfiddle.net/nt99zzmp/1/

var App = React.createClass({
  render: function() {
    var img = this.state.showImage ? <MyImage /> : '';
    return (
    <div>{img}<RemoveImageButton clickHandler={this.removeImage} /></div>
    );
  },
  
  getInitialState: function() {
      return {
          showImage: true
      };
  },
  
  removeImage: function() {
      this.setState({ showImage: false });
  }
});

var MyImage = React.createClass({
  render: function() {
    return (
      <img id="kitten" src={'http://placekitten.com/g/200/300'} />
    );
  }
});

var RemoveImageButton = React.createClass ({
  render: function() {
    return (
      <button onClick={this.props.clickHandler}>remove image</button>
    )
  }
});

React.render(<App />, document.body);

edited Apr 21, 2021 at 14:41

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Dec 1, 2014 at 19:49

BBonifield

5,01321 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rutger Over a year ago

Thank you so much, this helps me greatly in my understanding of structuring code!

Alireza · Accepted Answer · 2018-10-02 23:33:11Z

Basically removing a component doesn't make sense in React, you probably still thinking jQuery ways, basically in all modern and new JavaScript libraries including React, you should manage your component using state or a route to handle these things, deleting an element or component is not a good way to do these things in React or Angular for example.

For example you can have a boolean in this case and if it's true, show your image, otherwise hide it, or even return a different element in your component.

So in this case, you have a component which will return differently depends on props or state... something like this:

////
var MyImage = React.createClass({
  render: function() {
    if(this.state.showImage) {
      return (
        <img id="kitten" src={'http://placekitten.com/g/200/300'} />
      );
    } else {
      return<p>no image!</p>;
    }
  }
});
////

webjay · Accepted Answer · 2018-06-28 15:44:07Z

6

In this example, if you set this.state.render = false, the component will be removed from DOM:

  render() {
    const { render } = this.state;
    if (render === false) return null;
    return (<p>I am here as long as render isn't false</p>);
  }

answered Jun 28, 2018 at 15:44

webjay

5,5189 gold badges48 silver badges64 bronze badges

Collectives™ on Stack Overflow

react.js: removing a component

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related