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)
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)
setEditIds(...editIds, rowId)setEditIds(editIds.filter((id) => id !== rowId))I think following code sample will give you an idea of how you can achieve this when you move your editId to a local component state.
https://codesandbox.io/embed/hardcore-sid-pythne?fontsize=14&hidenavigation=1&theme=dark