how to remove / unmount nested react components

Question

I'd like to unmount a single react component, which belongs to a parent component containing three components total. The parent component has this render function:

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      <Home ref="home"/>
      <Footer ref="footer"/>
    </div>
),

handleNavbarClick: function () {
  // remove Home
}

if a user then clicks on a link in the navbar and I want to unmount the Home component, how would I do that? it seems like my only option is to do something like this (taken from react.js: removing a component), but this seems pretty gross:

render: function () {
  var home = this.state.remove_home ? null : <Home ref="home />
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {home}
      <Footer ref="footer"/>
    </div>
),

handleNavbarClick: function () {
  this.setState({remove_home: true});
}

Is that the appropriate react way to do things?

score 4 · Accepted Answer · answered May 26 '15 at 02:56

Yes, your proposed solution of

render: function () {
  var home = this.state.remove_home ? null : <Home ref="home" />
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {home}
      <Footer ref="footer"/>
    </div>
),

handleNavbarClick: function () {
  this.setState({remove_home: true});
}

is more-or-less the "correct" way to handle this with React. Remember, the purpose of render is to describe the way your component should look at any given point. Reaching out to the DOM and performing manual operations, or doing other kind of imperative work like "removing" an element, is almost always the wrong thing to do.

If you're concerned about the syntax, you can consider inlining or extracting the logic:

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {this.state.remove_home ? null : <Home ref="home" />}
      <Footer ref="footer"/>
    </div>
),

or

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {!this.state.remove_home && <Home ref="home" />}
      <Footer ref="footer"/>
    </div>
),

or

render: function () {
  return (
    <div className={classes}>
      <Navbar ref="navbar"/>
      {this.renderHome()}
      <Footer ref="footer"/>
    </div>
),

renderHome: function() {
  if (!this.state.remove_home) {
    <Home ref="home" />
  }
}

thanks. I like the idea of breaking out renderHome into its own function — dcochran, May 26 '15 at 15:19

score 0 · Answer 2 · answered May 26 '15 at 02:24

0

try this

handleNavBarClick: function(){
    React.findDOMNode(this.refs.home).style.display = 'none';
}

answered May 26 '15 at 02:24

Phi Nguyen

3,046
14
26

1

mmm yeah that would work except the component's listeners would remain intact. – dcochran May 26 '15 at 15:18

how to remove / unmount nested react components

2 Answers2

Linked