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?

Answer 1

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);