[Datagrid]: Datagrid crashes with custom Cell component

[flannanl]

Package

Carbon for IBM Products

Description

When moving up to v2.48.0 from v2.47.0, the Datagrid rendering crashes. I am not sure what causing the crash. I tried to create a simple example but I cannot reproduce with it.

Component(s) impacted

This is the stack trace I collected from console.

react-dom.development.js:14169 Uncaught 
Error: Cell(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    at reconcileChildFibers (react-dom.development.js:14169:1)
    at reconcileChildren (react-dom.development.js:16990:1)
    at mountIndeterminateComponent (react-dom.development.js:17890:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

react-dom.development.js:20085 The above error occurred in the <Cell> component:

    at Cell (http://localhost:3000/projects/static/js/app.js:9294:25)
    at td
    at TableCell (http://localhost:3000/projects/static/js/app.js:80803:5)
    at tr
    at TableRow (http://localhost:3000/projects/static/js/app.js:81583:83)
    at tbody
    at DatagridRefBody (http://localhost:3000/projects/static/js/app.js:4752:41)
    at DatagridBody (http://localhost:3000/projects/static/js/app.js:3979:34)
    at table
    at div
    at Table (http://localhost:3000/projects/static/js/app.js:80332:5)
    at div
    at div
    at div
    at TableContainer (http://localhost:3000/projects/static/js/app.js:80862:5)
    at DatagridContent (http://localhost:3000/projects/static/js/app.js:4068:28)
    at div
    at InlineEditProvider (http://localhost:3000/projects/static/js/app.js:7378:23)
    at FilterProvider (http://localhost:3000/projects/static/js/app.js:6187:24)
    at http://localhost:3000/projects/static/js/app.js:18956:10
    at div
    at SolutionList (http://localhost:3000/projects/static/js/app.js:301341:24)
    at div
    at ProjectDetails (http://localhost:3000/projects/static/js/app.js:293820:24)
    at div
    at Layout (http://localhost:3000/projects/static/js/app.js:278583:23)
    at RenderedRoute (http://localhost:3000/projects/static/js/app.js:403710:5)
    at Routes (http://localhost:3000/projects/static/js/app.js:404331:5)
    at AppContainer (http://localhost:3000/projects/static/js/app.js:280455:20)
    at ErrorBoundary (http://localhost:3000/projects/static/js/app.js:429162:5)
    at Provider (http://localhost:3000/projects/static/js/app.js:210871:23)
    at Provider (http://localhost:3000/projects/static/js/app.js:210977:23)
    at Provider (http://localhost:3000/projects/static/js/app.js:211264:23)
    at Provider (http://localhost:3000/projects/static/js/app.js:210649:19)
    at Provider (http://localhost:3000/projects/static/js/app.js:211199:23)
    at Provider (http://localhost:3000/projects/static/js/app.js:210803:32)
    at Provider (http://localhost:3000/projects/static/js/app.js:210593:32)
    at I18nextProvider (http://localhost:3000/projects/static/js/app.js:481732:5)
    at Suspense
    at Router (http://localhost:3000/projects/static/js/app.js:404269:15)
    at BrowserRouter (http://localhost:3000/projects/static/js/app.js:402328:5)
    at ApolloProvider (http://localhost:3000/projects/static/js/app.js:445068:21)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.48.0

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM Cloud Projects

CodeSandbox or Stackblitz example

N/A

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[flannanl]

It seems this bug has something to do with useNestedRows. If I comment it out, my Datagrid table renders.

[flannanl]

Looks like this has to do with the new feature released by https://github.com/carbon-design-system/ibm-products/pull/5735. The error happens if I don't have a getAsyncSubRows provided. If I start adding a dummy one like getAsyncSubRows: async () => {},. The table then renders.

[matthewgallo]

Hi @flannanl, can you create a reproduction for this? Or share some of your Datagrid implementation?

[flannanl]

@matthewgallo I tried to reproduce it in Stackblitz but was not able to do so... However I am able to simplify my current implementation in IBM Cloud Projects to show the problem in the page.

export const getColumns = (t) => [
  {
    Header: 'name',
    accessor: 'text',
  },
];

...

  const columns = useMemo(() => getColumns(t), []);

  const [rows, setRows] = useState([]);
  useEffect(() => {
    setTimeout(() => {
      setRows([{ link: { name: 'foo' }, text: 'foo' }]);
    }, 2000);
  }, []);

  const datagridState = useDatagrid(
    {
      columns,
      data: rows,
      // getAsyncSubRows: async () => {},
    },
    useNestedRows,
  );

  return (
    <div hidden={!isSelected} className={c()}>
      <Datagrid datagridState={{ ...datagridState }} />
    </div>
  );

This will crash my page. If I uncomment the getAsyncSubRows, it will render.

[matthewgallo]

I've created a reproduction of this using React 17 https://stackblitz.com/edit/github-gkxha8?file=package.json,src%2Fmain.jsx,src%2FExample%2FExample.jsx

[s100]

What version of @carbon/ibm-products has this fix in?