Form inputs should clear only with correct submit - reactjs

Question

My form component looks like :
constructor(props) {
super(props);
this.state = {
startDate: '',
endDate: '',
description: '',
profileId: this.props.profileId
}
this.onStartDateChange = this.onStartDateChange.bind(this);
this.onEndDateChange = this.onEndDateChange.bind(this);
this.onDescriptionChange = this.onDescriptionChange.bind(this);
this.clickHandle = this.clickHandle.bind(this);
}
onStartDateChange(event) {
const startDate = event.target.value
this.setState({
startDate: startDate
})
}
onEndDateChange(event) {
const endDate = event.target.value
this.setState({
endDate: endDate
})
}
onDescriptionChange(event) {
const description = event.target.value
this.setState({
description: description
})
}
clickHandle = () => {
const inputValues = {
startDate: this.state.startDate,
endDate: this.state.endDate,
description: this.state.description
}
this.props.onAddClick(this.state.profileId, inputValues);
}
render() {
return (
<Form>
<div className={"m-3 form-row"}>
<Field type={"date"} className={"form-control col-md-2 mr-2"}
onChange={evt => this.onStartDateChange(evt)}
value={this.state.startDate}
name={"add-start-date"}/>
<Field type={"date"} className={"form-control col-md-2 mr-2"}
onChange={evt => this.onEndDateChange(evt)}
value={this.state.endDate}
name={"add-end-date"}/>
<Field className={"form-control col-md-2 mr-2"}
type={"textarea"}
onChange={evt => this.onDescriptionChange(evt)}
value={this.state.description}
name={"add-description"}/>
<button className="btn btn-info round-btn" href="#"
onClick={this.clickHandle}
type={"button"}><FontAwesomeIcon icon={faPlus}/></button>
</div>
</Form>
}
My action looks like:
export const onAddClick = (profileId, educationData = {
startDate: '',
endDate: '',
description: ''
}) => {
return (dispatch) => {
const education = {
startDate: educationData.startDate,
endDate: educationData.endDate,
description: educationData.description
};
return axios.post(`${ENTRY_API_URL}`)
.then(response => {
dispatch(_addEducation(profileId, response.data))
})
.catch((error) => {
if (error) {
dispatch(_requestFailure(profileId, error.response.data))
}
})
};
};
My store looks like
workExperience: [
{
id: '5d6e3368993694389c903c50',
startDate: '2019-09-04',
endDate: '2019-09-12',
description: 'description'
},
How can I clear input only when request to API is correct and when its wrong leave it. Can I make it without redux-forms ? I tried with some flag in store but it change slowly after I clicked the button. Should I try make some state in redux for this form ?