title: Formik, multi step form making button disable
body: <p>I have a Formik with multi step form.  Each step is a component which user have to fill out. Components renders depending on "activeStep" state.  If user  haven't filled out the forms he can't go to the next step and "next" button is disabled. If user filled required fields next button become active. I connected "next" button with "isValid" property. </p>
  
  <pre><code>&lt;button disabled={ !isValid }&gt;
  </code></pre>
  
  <p>Everything works fine if there is some errors or empty inputs next button stays disable. But when next component renders, "isValid" property stays true until I press to any input, and then it become false and next button gets disable. I need make next button disable as soon as new component renders without focusing to any input. </p>
  
  <pre><code>//conditional component rendering
  displayForms = (values, isValid,step) =&gt; {
      const { activeStep, allSteps, file, isDisabled } = this.state;
      const { resumeSended, resumeFile } = this.props;
      const formsComponents = {
        1: (
          &lt;Step1
            {...values}
            uploadFile={this.uploadFile}
            filename={file ? file.name : null}
            setFile={this.setFile}
            fileLoaded={resumeFile}
          /&gt;
        ),
        2: &lt;Step2 education={values.education} item={this.eduValues} /&gt;,
        3: &lt;Step3 experience={values.experience} item={this.experienceValues} /&gt;,
  
      };
  
      switch(step){
        case 1:  return formsComponents[1];
        case 2:  return  formsComponents[2];
        case 3:  return  formsComponents[3];
      }
    };
  
  
    &lt;Formik
              ref={this.resume}
              initialValues={this.initialValues}
              render={({ values, isValid,errors}) =&gt; {
                return (
                  &lt;Form id='myform'&gt;
                    &lt;div className="jobs-resume-panes"&gt;
                        {this.displayForms( values, isValid,this.state.activeStep)}
  
                    &lt;/div&gt;
                    {activeStep === allSteps &amp;&amp; (
                      &lt;div className="form-block form-block--checkbox"&gt;
                        &lt;Field
                          type="checkbox"
                          name="agree"
                          checked={values.agree}
                          id="agree"
                          validate={val =&gt; (val ? undefined : 'error')}
                        /&gt;
                      &lt;/div&gt;
                    )}
                    &lt;div className="jobs-resume-controls"&gt;
                      &lt;button
                        type="button"
                        onClick={this.goPrevStep}
                      &gt;
                        Back
                      &lt;/button&gt;
                      &lt;div className="jobs-resume-next"&gt;
                        {activeStep === allSteps ? (
                          &lt;button
                            onClick={() =&gt; this.submitResume(values, isValid)}
                          &gt;
                           Save
                          &lt;/button&gt;
                        ) : (
                          &lt;button
                            disabled={ !isValid }
                            onClick={()=&gt;this.goNextStep()}
                          &gt;
                            Next
                          &lt;/button&gt;
                        )}
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/Form&gt;
                );
              }}
            /&gt;
  </code></pre>