title: react formik - fill form inputs with data after http request
body: <p>I created form with formik. 
  I want to edit record with the form. I want to fetch data from database and fill the form with them. 
  However with no success. </p>
  
  <p>Here is my code. </p>
  
  <pre><code>class UserForm extends Component {
  
    componentWillMount(){
      this.setState({firstName:''})
      var repository = new Repository();
      repository.getUser(function(user){
         this.setState({
          firstName: user.firstName,
         });
      }.bind(this),this.props.currentId)        
    }
  
    render() {
      return (
        &lt;Formik
        initialValues={{
          firstName: this.state.firstName,
        }}
          validationSchema = {Yup.object().shape({
            firstName: Yup.string().required('First name is required'),
  
          })}
        onSubmit={item =&gt; { this.props.addRecordToTable(item)}}
        render={({ setFieldValue, values, errors, touched, isSubmitting }) =&gt;
          &lt;Form&gt;
          &lt;div&gt;
            { touched.firstName &amp;&amp; errors.firstName &amp;&amp; &lt;p&gt;{errors.firstName}&lt;/p&gt; }
            &lt;Field type="input" name="firstName" placeholder="First name"/&gt;
          &lt;/div&gt;
          &lt;input type="submit"&gt;&lt;/input&gt;
        &lt;/Form&gt;}
      /&gt;
      );
    }
  }
  
  export default UserForm;
  </code></pre>
  
  <p>Input firstName will never be filled with loaded data. 
  How can i solve this?</p>