title: How to make a React component have more than 2 or 3 states, etc?
body: <p>I'm still wrapping my head around React. I'm making a file upload component. I want the component to display three different states as the upload occurs. I'd like it to initially display the select file input field, then when the user submits that form I want it to display some sort of "uploading ..." message, and finally when the upload has completed I want it to say something like "finished!"</p>
  
  <p>Right now, I've got it displaying the input field, and then the "uploading" message when the form is submitted. I'm just looking at the components state and depending on the state, I return one or the other item in <code>render</code>.</p>
  
  <p>Should I just follow this same pattern up to as many render states as needed? This could end up with a huge if-else block, and that'd be fine?</p>
  
  <p>Here's my component for context ...</p>
  
  <pre><code>/**
   * Module dependencies
   */
  
  import React from 'react';
  import connectToStores from 'flummox/connect';
  
  
  /**
   * Repositories
   */
  
  import * as Replays from '../repository/ReplayRepository';
  
  
  /**
   * Components
   */
  
  import ReplayUploadForm from '../components/ReplayUploadForm';
  
  
  /**
   * Component definition
   */
  
  class ReplayUploadFormContainer extends React.Component {
  
    constructor() {
  
      super();
  
      // pre-binding
      this._handleUploadAttempt = this._handleUploadAttempt.bind(this);
  
      // initial state
      this.state = {
        signed: null
      };
  
    }
  
    render () {
      if (this.state.signed) {
        return (
          &lt;h2&gt;Uploading ...&lt;/h2&gt;
        );
      } else {
        return (
          &lt;ReplayUploadForm onUploadAttempt={this._handleUploadAttempt} /&gt;
        );
      }
    }
  
    _handleUploadAttempt (file) {
  
      // request signed upload request
      Replays.sign(file).then(response =&gt; {
  
        // update component state
        this.setState({
          signed: response
        });
  
        // start file upload
        Replays.upload(file, response).then(response =&gt; {
  
          console.log(response);
  
        });
  
      });
  
    }
  
  }
  
  
  /**
   * Module exports
   */
  
  export default ReplayUploadFormContainer;
  </code></pre>