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?