title: How to change a component's state correctly from another component as a login method executes?
body: <p>I have two components - a sign in form component that holds the form and handles login logic, and a progress bar similar to the one on top here in SO. I want to be able to show my progress bar fill up as the login logic executes if that makes sense, so as something is happening show the user an indication of loading. I've got the styling sorted I just need to understand how to correctly trigger the functions.</p>
  
  <p>I'm new to React so my first thought was to define <code>handleFillerStateMax()</code> and <code>handleFillerStateMin()</code> within my <code>ProgressBarComponent</code> to perform the state changes. As the state changes it basically changes the width of the progress bar, it all works fine. But how do I call the functions from <code>ProgressBarComponent</code> as my <code>Login</code> component <code>onSubmit</code> logic executes? I've commented my ideas but they obviously don't work..</p>
  
  <p><code>ProgressBarComponent</code>:</p>
  
  <pre><code>class ProgressBarComponent extends React.Component {
      constructor(props) {
          super(props)
  
          this.state = {
              percentage: 0
          }
      }
  
      // the functions to change state
      handleFillerStateMax = () =&gt; {
          this.setState ({percentage: 100})
      }
  
      handleFillerStateMin = () =&gt; {
          this.setState ({percentage: 0})
      }
  
      render () {
          return (
              &lt;div&gt;
                  &lt;ProgressBar percentage={this.state.percentage}/&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><code>Login</code> component:</p>
  
  <pre><code>class SignInFormBase extends Component {
      constructor(props) {
          super(props);
  
          this.state = {...INITIAL_STATE};
      }
  
      onSubmit = event =&gt; {
  
          const {email, password} = this.state;
  
          // ProgressBarComponent.handleFillerMax()????
  
          this.props.firebase
              .doSignInWithEmailAndPass(email,password)
              .then(()=&gt; {
                  this.setState({...INITIAL_STATE});
                  this.props.history.push('/');
  
                  //ProgressBarComponent.handleFillerMin()????
  
              })
              .catch(error =&gt; {
                  this.setState({error});
              })
          event.preventDefault();
  }
  </code></pre>