How to remove UI components using React JS

Question

I'm having trouble finding relevant documentation on how to remove UI components when using react. For example, there's a login form. The user clicks submit and now the form should be removed from the screen. How do I do this?

I've found unmountComponentAtNode, but that can only be invoked at the parent level. Am I supposed to have a parent node that is aware of all child state and loads them conditionally? Should all children have an "isHidden" attribute which renders the dom as hidden if true?

This must be basic but I don't see this in the react js tutorials. I found this stackoverflow post (react.js: removing a component) is this really the pattern? It kind of makes sense but it means that a large app will likely have an extremely complex Application parent class that manages maps of application state based on configuration.

It seems like i need to start defining application state as named maps. For example:

BaseApp: showHeader=true;showContent=true;
LoginState: showBaseApp=true;showLoginForm=true; 
LoggedInState: showBaseApp=true;showFeed=true;

At any moment we would have to update all state maps and call the base class render method...

How do you define app state? If you are doing it based on location, take a look at [react-router](https://github.com/rackt/react-router), maybe it is a thing that you are looking for. — just-boris, Dec 20 '15 at 15:07

score 0 · Answer 1 · answered Dec 20 '15 at 16:36

In my opinion your question isn't about removing component but about showing the right component. And yes - it can be done with a component state but with Flux/Redux store/reducer as well.

In your example with a login form after click on "Submit" we can change local state for the component and show another text like "The request was sent blah-blah-blah" or another component.

But you can do this by extracting component's local state to a store/reducer and it'll be work better in relatively big app. Nevertheless, it's really up to you where you want to store state.

score 0 · Answer 2 · answered Dec 20 '15 at 16:48

I like to use a hide prop like so.

class AppCtrlRender extends React.Component {
   render() {
    let page = this.state.appState.currentPage;
    let hideAbout = (page != 'about');
    let hideHome = (page != 'home');
    return (
      <div id='AppCtrlSty' style={AppCtrlSty}>
        <div id='allPageSty' style={allPageSty}>
          <AboutPage hide={hideAbout} />
          <HomePage hide={hideHome} />
        </div>
      </div>
    );
  }
}

export default class AboutPage extends React.Component {
  render() {
    if (this.props.hide) return null;
    let aTime = (new Cache()).time.toString();
    return (
      <div style={AboutPageSty}>
        React 0.14 ReFlux used for app state. This is the About Page.
        <NavMenu /><br/><br/>
          {aTime}
      </div>
    );
  }
}

How to remove UI components using React JS

2 Answers2