title: How to have a React spinner component that I can call up from anywhere?
body: <p>My goal is to have a spinner component that I can pop up anywhere I want, while some activity is being carried out.</p>
  
  <p>For example, let's say I have this:</p>
  
  <pre><code>render() {
    return (
      &lt;form onSubmit={this.handleSubmit} className={this.props.className}
            noValidate&gt;
        {React.Children.map(this.props.children, this.renderChild)}
      &lt;/form&gt;
    )
  },
  </code></pre>
  
  <p>This is my <code>handleSubmit</code> method, but it doesn't work properly:</p>
  
  <pre><code>handleSubmit(event) {
    event.preventDefault();
  
    React.render(&lt;SmartSpinner /&gt;, React.findDOMNode(this));
  },
  </code></pre>
  
  <p>The screen goes black and I get some nasty warnings. The <code>SmartSpinner</code> will cover the entire web page, so it doesn't really matter where it's positioned (it's <code>position: fixed</code>), but I do need to call it up programmatically. In other words, I don't want to have to do this:</p>
  
  <pre><code>render() {
    return (
      &lt;div&gt;
        &lt;form onSubmit={this.handleSubmit} className={this.props.className}
              noValidate&gt;
          {React.Children.map(this.props.children, this.renderChild)}
        &lt;/form&gt;
        {this.state.busy ? &lt;SmartSpinner /&gt; : ""}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>So what's a good way to do a spinner or modal or some other temporary overlay in the current page/component?</p>