Multiple components to result in one value with Formik - reactjs

Question

I have 3 <select> 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 connect and use setFieldValue and setFieldError, but the error disappears after I edit an other component in that form.
How can I solve it to the error remain persistent. As I saw, this behaviour is known.
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 => {
const stateProp = e.target.name.split('.').pop();
this.setState(
{
[stateProp]: e.target.value,
},
() => {
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 = () => {
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 (
<div className="form-group">
<label>{this.props.label}</label>
<select
name={`${this.props.name}.day`}
value={this.state.day}
onChange={this.handleChange}
onBlur={this.handleBlur}
>
{
// options for days
}
</select>
<select
name={`${this.props.name}.month`}
value={this.state.month}
onChange={this.handleChange}
onBlur={this.handleBlur}
>
{
// options for months
}
</select>
<select
name={`${this.props.name}.year`}
value={this.state.year}
onChange={this.handleChange}
onBlur={this.handleBlur}
>
{
// options for years
}
</select>
{error && (
<div className="validation-message">
<span>{error}</span>
</div>
)}
</div>
);
}
}
const getValueByPath = (obj, path) => path.split('.').reduce((o, i) => o && o[i], obj);
export default connect(DateField);

Answer 1

My advice would be in de-coupling the component from formik, let it provide a date and handle change accordingly. the form in which you use this can then determine if the provided date is valid or not and pass the error to your controlled component to show until the date is valid. This is also great for re-usability.
const DatePicker = ({ name, value, error, onChange, onBlur }) => {
const today = new Date(value);
const [day, setDay] = useState(today.getUTCDay());
const [month, setMonth] = useState(today.getUTCMonth());
const [year, setYear] = useState(today.getUTCYear());
useEffect() => {
const newDate = new Date([year, month, day]);
const target = { name, value: newDate };
onChange({ target });
}, [day, month, year]);
return (
//do your JSX here;
);
}