Managing state of individual rows in react js table-CodePudding

I have a requirement where for each row of a table(rows are dynamically populated), I have a 'Details' button, which is supposed to pop up a modal upon clicking. How do I maintain a state for each of the rows of this table, so that React knows which row I am clicking, and hence pass the props accordingly to the modal component?

What I tried out was create an array of all false values, with length same as my data's. The plan is to update the boolean for a particular row when the button is clicked. However, I'm unable to execute the same.

Here's what I've tried so far:

let initTableState = new Array(data.length).fill(false)
const [tableState, setTableState] = useState(initTableState)
const detailsShow = (index) => {
    setTableState(...tableState, tableState[index] = true)
}

I get the 'data' from DB. In the function detailsShow, I'm trying to somehow get the index of the row, so that I can update the corresponding state in 'tableState' Also, here's what my code to put in modal component looks like, placed right after the row entries are made:

{tableState[index] && DetailModal}

Here DetailModal is the modal component. Any help in resolving this use case is greatly appreciated!

CodePudding user response：

The tableState is a single array object. You are also spreading the array into the setTableState updater function, the state updater function also takes only a single state value argument or callback function to update state.

You can use a functional state update and map the previous state to the next state, using the mapped index to match and update the specific element's boolean value.

const detailsShow = (index) => {
  setTableState(tableState => tableState.map((el, i) => i === index ? true : el))
}

If you don't want to map the previous state and prefer to shallow copy the array first and update the specific index:

const detailsShow = (index) => {
  setTableState(tableState => {
    const nextTableState = [...tableState];
    nextTableState[index] = true;
    return nextTableState;
  })
}