title: Multiple components to result in one value with Formik
body: <p>I have 3 <code>&lt;select&gt;</code> components. In the first component I have the days, in the second the months and in the third the years. These components act as one date picker. I tried to wrap with Formik's <code>connect</code> and use <code>setFieldValue</code> and <code>setFieldError</code>, but the error disappears after I edit an other component in that form.</p>
  
  <p>How can I solve it to the error remain persistent. As I saw, this behaviour is <a href="https://github.com/jaredpalmer/formik/issues/1309" rel="nofollow noreferrer">known</a>.</p>
  
  <pre><code>class DateField extends Component {
    constructor(props) {
      super(props);
      const value = props.value;
      this.state = {
        day: moment.utc(value).date(),
        month: moment.utc(value).month(),
        year: moment.utc(value).year(),
      };
    }
  
    handleChange = e =&gt; {
      const stateProp = e.target.name.split('.').pop();
  
      this.setState(
        {
          [stateProp]: e.target.value,
        },
        () =&gt; {
          const { formik } = this.props;
          const date = this.dateFromState();
          const error = this.props.validate(date);
          formik.setFieldValue(this.props.name, date, false);
          formik.setFieldError(this.props.name, error);
        }
      );
    };
  
    handleBlur = () =&gt; {
      const { formik } = this.props;
      const date = this.dateFromState();
      const error = this.props.validate(date);
      formik.setFieldTouched(this.props.name, true, false);
      formik.setFieldError(this.props.name, error);
    };
  
    dateFromState() {
      // returns date constructed from the state
    }
  
    render() {
      const { formik, name } = this.props;
      const error = getValueByPath(formik.errors, name);
  
      return (
        &lt;div className="form-group"&gt;
          &lt;label&gt;{this.props.label}&lt;/label&gt;
          &lt;select
            name={`${this.props.name}.day`}
            value={this.state.day}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
          &gt;
            {
              // options for days
            }
          &lt;/select&gt;
          &lt;select
            name={`${this.props.name}.month`}
            value={this.state.month}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
          &gt;
            {
              // options for months
            }
          &lt;/select&gt;
          &lt;select
            name={`${this.props.name}.year`}
            value={this.state.year}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
          &gt;
            {
              // options for years
            }
          &lt;/select&gt;
          {error &amp;&amp; (
            &lt;div className="validation-message"&gt;
              &lt;span&gt;{error}&lt;/span&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  const getValueByPath = (obj, path) =&gt; path.split('.').reduce((o, i) =&gt; o &amp;&amp; o[i], obj);
  
  export default connect(DateField);
  </code></pre>