Elements Conditionally Rendered in Table Using Render Props Pattern Do Not Show

[slackermorris]

It's a bit of a mouthful. But, I've noticed that elements conditionally rendered in a table, that have their visibility managed at the level of the table, do not render when a render props pattern is used versus iterating over the items with .map inline.

I acknowledge that the examples below are wrong, wrong, wrong. They are just to illustrate the point.

This does not work:

function UsingRenderPropsPattern() {
  const [showModal] = useState(true);

  return (
    <>
      <Table>
        <TableBody items={users}>
          {(user) => (
            <>
              <Row />
              {showModal ? <Modal /> : null} // The modal does not render.
            </>
          )}
        </TableBody>
      </Table>
    </>
  );
}

This works:

function NotUsingRenderPropsPattern() {
  const [showModal] = useState(true);

  return (
    <>
      <Table>
        <TableBody>
          {users.map((user) => (
            <>
              <Row />
              {showModal ? <Modal /> : null} // The modal does render.
            </>
          ))}
        </TableBody>
      </Table>
    </>
  );
}

Here is a reproduction: https://codesandbox.io/p/sandbox/github/slackermorris/react-aria-reproduction-table-conditional-invisible-with-render-props. RUN THE TESTS.

This might be by design, I am unsure. It is also possible that I am abusing table semantics. Either way, there is a potential learning I am keen to grab.

Thank you for all the great work.

[snowystinger]

You'll want to use the dependencies array for the collection on TableBody so we know when to invalidate the cache and re-render the items. That's the reason that users.map works, it's never cached.
https://react-spectrum.adobe.com/react-aria/Table.html#content

Otherwise, you'll want to move the state for show modal inside a component that gets rendered inside a Cell.