i am new to react js,i am added one form using formik in that form, some field with array of object with map,
{serviceTemplateItems.length > 0 && (
<div className={“w-full flex flex-col”}>
{serviceTemplateItems.map((items, _index) => {
return (
<div
style={{
border: '1px solid #cacaca',
borderRadius: '3px',
width: '100%',
padding: '30px',
marginBottom: '20px'
}}
>
<Grid container spacing={4}>
<Grid item xs={8}>
<FleetableFormikSelectField
label={t('SearchAndAddServices')}
options={assetServiceItems}
// value={formikProps.values.assetServiceItems}
value={getIn(formikProps.values.assetServiceItems, items)}
changeHandler={e => {
changeFieldHandlers(formikProps, e.target.name, e.target.value);
}}
name={'items.assetServiceItems'}
/>
</Grid>
<Grid item xs={4}>
<FleetableFormikRadioGroup
name="isRecurring"
fieldLabel={t('IsRecurring')}
options={yesNoOptions}
value={formikProps.values.isRecurring}
changeHandler={e => {
changeFieldHandlers(formikProps, e.target.name, e.target.value);
}}
/>
</Grid>
<Grid item xs={4}>
<FleetableFormikSelectField
name={'recurringType'}
options={recurringType}
label={t('Select Recurring Type')}
changeHandler={e => {
changeFieldHandlers(formikProps, e.target.name, e.target.value);
}}
value={formikProps.values.recurringType}
styles={{ MarginLeft: '20px' }}
/>
</Grid>
<Grid item xs={4}>
<FleetableFormikSelectField
name={'recurringFrom'}
options={recurringFrom}
label={t('Select Recurring From')}
changeHandler={e => {
changeFieldHandlers(formikProps, e.target.name, e.target.value);
}}
value={formikProps.values.recurringFrom}
className={'mx-12'}
/>
</Grid>
<Grid item xs={4}>
<FleetableFormikTextField
name={'recurringAt'}
label={t('Recurring At')}
value={formikProps.values.recurringAt}
fieldClasses={'mx-12'}
changeHandler={e => {
changeFieldHandlers(formikProps, e.target.name, e.target.value);
}}
/>
</Grid>
</Grid>
</div>
);
})}
</div>
)}
this is the code, in this when I am try to change in one field, then same thing selected in other array items can you please tell me how to set changehandler
this is add function to add another array, can you please anyone help me how to solve this issue
const addServiceTemplateItem = () => {
setServiceTemplateItems([...serviceTemplateItems, {
assetServiceItems: '',
isRecurring: '',
recurringFrom: '',
recurringType: '',
recurringAt: ''
}])
}