I am using Ant Design. I have a dropdown in a table:
.......
render: (_text: any, _record: ResponseCode, index: any) => {
console.log({ form: form.getFieldsValue(), index });
return (
<>
<button
onClick={() => {
form.resetFields([
`rcForm_payportalExternalResponseCodes_${index}`,
]);
dispatch(setResponseCodeData(undefined));
buttonDisabled[index] = true;
}}
>
Reset
</button>
<Form form={form} name="rcForm">
<SelectInput
name={['payportalExternalResponseCodes', index]}
className="tpp-borderless-input"
placeholder="Select Response Code"
bordered={false}
dropdownStyle={{ minWidth: 350 }}
options={responseCodeOptions}
onSelect={(val) => {
dispatch(
setResponseCodeData({
payportalExternalResponseCodes: val as number,
mapped: true,
})
);
buttonDisabled[index] = false;
console.log('value', value);
}}
onClear={() => {
console.log('_record', _record);
dispatch(setResponseCodeData(undefined));
buttonDisabled[index] = true;
}}
onChange={(value) => {
console.log(value);
}}
/>
</Form>
</>
);
},
},
......
I want to reset the value of only one field:

I tried with:
onClick={() => {
form.resetFields([`rcForm_payportalExternalResponseCodes_${index}`]);
}}
But nothing happens. How can I achieve to reset the value of the individual select field?