Multiple Row Edit Functionality in React

I am trying to implement an edit row functionality in a react grid. I have attached 2 links. Link 1 is the GIF which shows the functionality that I have implemented using the below code.(For privacy reasons I cannot publish the actual code)

Link 2 is the functionality I am trying to achieve! How shall I do that?

 return (
  <>
    <p>Sample Row Field</p>
    {editId === Id && editRow === true ? (
      <select options={options} handleChange={handleChange} />
    ) : (
      existingRowValue
    )}
  </>
);

Link 1 – The Functionality I have (Individual Row)

https://i.stack.imgur.com/JJEL5.gif

Link 2 – The Functionality I want (Multiple Rows)

https://i.stack.imgur.com/w7ppb.gif

Answer

I’d assume editId is a local state variable, same for editRow So what you’d need to do is change editId into a state called editIds as an array (because you want to edit multiple rows, not just one), and replace editId === Id with editIds.includes(Id)

• onEditClick: should add the rowId into this state, like setEditIds(...editIds, rowId)
• onSave/CancelClick: should remove the id from the state, like: setEditIds(editIds.filter((id) => id !== rowId))