I am displaying data fetched from API in table, which has inputs as fields to edit the data.
It has multiple data records fetched via API , post changes of the record I want to update the changes done by user and pass it to API for update.
{Result.map((item,index) => (
<tr key={index} className="table-Result-Data">
<td>
<input
type="text"
name="applicationId"
value={item.acd_ap_id}
readOnly
/>
</td>
<td>
<input
type="text"
name="applicationName"
value={item.acd_ap_nm}
readOnly
/>
</td>
<td>
<input
type="text"
name="gsid"
value={item.acd_ap_gsid}
readOnly
/>
</td>
<td>
<input
type="text"
name="Sequence"
value={item.acd_con_seq}
readOnly
/>
</td>
<td>
<input
type="text"
name="applicationDl"
onChange={(e) => {
item.acd_appl_dl = e.target.value;
}}
defaultValue={item.acd_appl_dl}
/>
</td>
<td>
<input
type="email"
name="leadManagerDl"
defaultValue={item.acd_lead_manager_dl}
onChange={(e) => {
item.acd_lead_manager_dl = e.target.value;
}}
/>
</td>
<td>
<input
type="email"
name="systemOwnerNameDl"
defaultValue={item.acd_system_owner_name_dl}
onChange={(e) => {
item.acd_system_owner_name_dl = e.target.value;
}}
/>
</td>
<td>
<input
type="text"
name="dataCenterName"
defaultValue={item.acd_dc_name}
onChange={(e) => {
item.acd_dc_name = e.target.value;
}}
/>
</td>
<td>
<input
type="text"
name="qaSftpId"
defaultValue={item.acd_qa_sftp_id}
onChange={(e) => {
item.acd_qa_sftp_id = e.target.value;
}}
/>
</td>
<td>
<input
type="text"
name="qaSftpPwd"
defaultValue={item.acd_qa_sftp_pwd}
onChange={(e) => {
item.acd_qa_sftp_pwd = e.target.value;
}}
/>
</td>
<td>
<input
type="text"
name="prodSftpId"
defaultValue={item.acd_prod_sftp_id}
onChange={(e) => {
item.acd_prod_sftp_id = e.target.value;
}}
/>
</td>
<td>
<input
type="text"
name="prodSftpPwd"
defaultValue={item.acd_prod_sftp_pwd}
onChange={(e) => {
item.acd_prod_sftp_pwd = e.target.value;
}}
/>
</td>
<td>
<input
type="text"
name="updatedUser"
defaultValue={item.acd_upd_usr}
onChange={(e) => {
item.acd_upd_usr = e.target.value;
}}
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
<input type="submit" className="submit_Update" />
The result has four data I accessing it using the formdata
export async function action({ request }) {
console.log(" APDB functioncalled");
const formData = await request.formData();
console.log(formData)
const data = Object.fromEntries(formData);
console.log(data)
}
I submit I am getting only the last values of result not able to all the objects of results, is due to map function or what?
How I can resolve it?
2
Answers
All the inputs within the form necessarily should have unique
name
attributes. Your current implementation uses the samename
attribute for each mapped set of inputs, so only the last mapped inputs are the ones that set the form data values.Appending the array index is one way to disambiguate all the inputs.
Example:
When submitting the form the action should be able to access all the fields and may look similar to this:
you can change same Result by its index like this for on changes event