I have a react form like this.
<ValidatedForm onSubmit={filterData}>
<div className="row">
<ValidatedField
className="col"
label="Start Date"
id="recruitment-startDate"
name="startDate"
data-cy="startDate"
type="date"
placeholder="YYYY-MM-DD"
/>
<ValidatedField className="col" label="Status" id="recruitment-status" name="status" data-cy="status" type="select" validate={{
required: { value: false, message: 'This field is required.' },
}}>
{statusValues.map(status => (
<option value={status} key={status}>
{status}
</option>
))}
</ValidatedField>
<ValidatedField
className="col"
label="Candidate First Name"
id="tr-first"
name="firstName"
data-cy="firstName"
type="text"
value={firstName}
validate={{
required: { value: false, message: 'This field is required.' },
}}
/>
<ValidatedField
className="col"
label="Candidate Last Name"
id="tr-last"
name="lastName"
data-cy="lastName"
type="text"
validate={{
required: { value: false, message: 'This field is required.' },
}}
/>
<Button className="col-1" type="submit" color="info" size="sm" data-cy="entityDetailsButton" disabled={loading}>
<FontAwesomeIcon icon="eye" /> <span>Search</span>
</Button>
</div>
</ValidatedForm>
and after clicking the search button the bellow function is called but I am not getting any input form field value .
const filterData = values => {
console.log(firstName)
dispatch(
getEntities({
page: paginationState.activePage - 1,
size: paginationState.itemsPerPage,
sort: `${paginationState.sort},${paginationState.order}`,
firstName: values.firstName,
lastName: values.lastName,
status: values.status,
startDate: values.startDate,
endDate: values.endDate,
})
);
}
I am not sure where where I made the mistake. I am totally new to react. I have tried many ways but couldn't found any appropriate solution.
onChange
method for the inputs and update the values accordingly