T
TanStack•17mo ago
extended-salmon

Storing `rowSelectionState` for multiple tables in parent component

Hi i am trying to have a component which stores the rowSelectionState of multiple tables, so something like: 
const [rowSelections, setRowSelections] = React.useState<Record<number, RowSelectionState>>({})
const [selectedIndex, setSelectedIndex] = React.useState(0)
const updateRowSelectionState: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {
  setRowSelections((prevRowSelections) => {
    const newRowSelectionValue = typeof rowSelectionUpdater === "function" 
      ? rowSelectionUpdater(prevRowSelections[selectedIndex] || {})
      : rowSelectionUpdater

    return {
      ...prevRowSelections,
      [selectedIndex]: newRowSelectionValue
    }
  }
}

// Pass the rowSelections[selectedIndex], and updateRowSelectionState into a Table component to render different rows based on the selectedIndex
const [rowSelections, setRowSelections] = React.useState<Record<number, RowSelectionState>>({})
const [selectedIndex, setSelectedIndex] = React.useState(0)
const updateRowSelectionState: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {
  setRowSelections((prevRowSelections) => {
    const newRowSelectionValue = typeof rowSelectionUpdater === "function" 
      ? rowSelectionUpdater(prevRowSelections[selectedIndex] || {})
      : rowSelectionUpdater

    return {
      ...prevRowSelections,
      [selectedIndex]: newRowSelectionValue
    }
  }
}

// Pass the rowSelections[selectedIndex], and updateRowSelectionState into a Table component to render different rows based on the selectedIndex
However, this method results in my components rendering infinitely, i suspect due to the updateRowSelectionState function. Is there a way for me to handle this functionality or something that I am doing wrong? PS - I have to handle the state here instead of within each individual table because i am using react-aria useTabList component which unmounts and mounts when different tabs are selected
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?