skip to Main Content

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


  1. All the inputs within the form necessarily should have unique name attributes. Your current implementation uses the same name 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:

    {result.map((item, index) => (
      <tr key={index} className="table-Result-Data">
        <td>
          <input
            type="text"
            name={"applicationId-" + index}
            value={item.acd_ap_id}
            readOnly
          />
        </td>
        <td>
          <input
            type="text"
            name={"applicationName-" + index}
            value={item.acd_ap_nm}
            readOnly
          />
        </td>
        <td>
          <input
            type="text"
            name={"gsid-" + index}
            value={item.acd_ap_gsid}
            readOnly
          />
        </td>
        <td>
          <input
            type="text"
            name={"Sequence-" + index}
            value={item.acd_con_seq}
            readOnly
          />
        </td>
        <td>
          <input
            type="text"
            name={"applicationDl-" + index}
            onChange={(e) => {
              item.acd_appl_dl = e.target.value;
            }}
            defaultValue={item.acd_appl_dl}
          />
        </td>
        <td>
          <input
            type="email"
            name={"leadManagerDl-" + index}
            defaultValue={item.acd_lead_manager_dl}
            onChange={(e) => {
              item.acd_lead_manager_dl = e.target.value;
            }}
          />
        </td>
        <td>
          <input
            type="email"
            name={"systemOwnerNameDl-" + index}
            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-" + index}
            defaultValue={item.acd_dc_name}
            onChange={(e) => {
              item.acd_dc_name = e.target.value;
            }}
          />
        </td>
        <td>
          <input
            type="text"
            name={"qaSftpId-" + index}
            defaultValue={item.acd_qa_sftp_id}
            onChange={(e) => {
              item.acd_qa_sftp_id = e.target.value;
            }}
          />
        </td>
        <td>
          <input
            type="text"
            name={"qaSftpPwd-" + index}
            defaultValue={item.acd_qa_sftp_pwd}
            onChange={(e) => {
              item.acd_qa_sftp_pwd = e.target.value;
            }}
          />
        </td>
        <td>
          <input
            type="text"
            name={"prodSftpId-" + index}
            defaultValue={item.acd_prod_sftp_id}
            onChange={(e) => {
              item.acd_prod_sftp_id = e.target.value;
            }}
          />
        </td>
        <td>
          <input
            type="text"
            name={"prodSftpPwd-" + index}
            defaultValue={item.acd_prod_sftp_pwd}
            onChange={(e) => {
              item.acd_prod_sftp_pwd = e.target.value;
            }}
          />
        </td>
        <td>
          <input
            type="text"
            name={"updatedUser-" + index}
            defaultValue={item.acd_upd_usr}
            onChange={(e) => {
              item.acd_upd_usr = e.target.value;
            }}
          />
        </td>
      </tr>
    ))}
    

    When submitting the form the action should be able to access all the fields and may look similar to this:

    console.log(data);
    
    {
        "applicationId-0": "sdkflksdls",
        "applicationName-0": "lskdlsdlsflkj",
        "gsid-0": "sdlkjdsflj",
        "Sequence-0": "dld[-04m",
        "applicationDl-0": "09fiblwen",
        "leadManagerDl-0": "sdp9@upmweg",
        "systemOwnerNameDl-0": "pse@knlen",
        "dataCenterName-0": "slkjeg;`",
        "qaSftpId-0": "p0jwew.",
        "qaSftpPwd-0": "l;jesf;l;",
        "prodSftpId-0": "ndvo;iwen",
        "prodSftpPwd-0": "odsilewn",
        "updatedUser-0": "lisfklf",
        "applicationId-1": "laflknnk",
        "applicationName-1": "lkesdp90efn",
        "gsid-1": "9035lkn0",
        "Sequence-1": "90welkeflkj",
        "applicationDl-1": "-0eoermg;e",
        "leadManagerDl-1": "poele@smflw",
        "systemOwnerNameDl-1": "lkewl@gkeln",
        "dataCenterName-1": "lksdmrh[oklme",
        "qaSftpId-1": "098senfk",
        "qaSftpPwd-1": "sdkjfnwle",
        "prodSftpId-1": "-9ergm.dr",
        "prodSftpPwd-1": "09o34j64;lkn",
        "updatedUser-1": "lkwe;l;ml;v"
    }
    
    Login or Signup to reply.
  2. you can change same Result by its index like this for on changes event

    {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) => {
                            Result[index]['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) => {
                            Result[index]['acd_lead_manager_dl'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="email"
                          name="systemOwnerNameDl"
                          defaultValue={item.acd_system_owner_name_dl}
                          onChange={(e) => {
                            Result[index]['acd_system_owner_name_dl'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="dataCenterName"
                          defaultValue={item.acd_dc_name}
                          onChange={(e) => {
                            Result[index]['acd_dc_name'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="qaSftpId"
                          defaultValue={item.acd_qa_sftp_id}
                          onChange={(e) => {
                            Result[index]['acd_qa_sftp_id'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="qaSftpPwd"
                          defaultValue={item.acd_qa_sftp_pwd}
                          onChange={(e) => {
                            Result[index]['acd_qa_sftp_pwd'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="prodSftpId"
                          defaultValue={item.acd_prod_sftp_id}
                          onChange={(e) => {
                            Result[index]['acd_prod_sftp_id'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="prodSftpPwd"
                          defaultValue={item.acd_prod_sftp_pwd}
                          onChange={(e) => {
                            Result[index]['acd_prod_sftp_pwd'] = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="updatedUser"
                          defaultValue={item.acd_upd_usr}
                          onChange={(e) => {
                            Result[index]['acd_upd_usr'] = e.target.value;
                          }}
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <input type="submit" className="submit_Update" />
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search