T
TanStack•6mo ago
rare-sapphire

Passing row deeply with context?

Hello! Quick noob question: do you see any issues using a context to pass the current row deeply? Example of what I'm doing: 
table.getRowModel().rows.map((row) => (
  <MyRowProvider key={row.index} row={row}>
    <MyTableRow row={row} />
    {row.getIsSelected() &&
      createPortal(
        <SelectedRowView />,
        document.getElementById(
          "inner-left-panel",
        ) as HTMLDivElement,
      )}
  </MyRowProvider>
))

export const MyRowProvider = React.memo(function MyRowProvider({
  children,
  row,
}: Props) {
  return (
    <MyRowContext.Provider value={{ row }}>
      {children}
    </MyRowContext.Provider>
  );
});
table.getRowModel().rows.map((row) => (
  <MyRowProvider key={row.index} row={row}>
    <MyTableRow row={row} />
    {row.getIsSelected() &&
      createPortal(
        <SelectedRowView />,
        document.getElementById(
          "inner-left-panel",
        ) as HTMLDivElement,
      )}
  </MyRowProvider>
))

export const MyRowProvider = React.memo(function MyRowProvider({
  children,
  row,
}: Props) {
  return (
    <MyRowContext.Provider value={{ row }}>
      {children}
    </MyRowContext.Provider>
  );
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?