DataTable: Data are not displayed when "Column" has no "field" attributes

[ghostd]

Describe the bug

I use DataTable with the callback "body" (without the "field" attribute); no data are displayed in this case (that workend with Prime 8.7.3).

Here is a test to reproduce the case (in addition to the CodeSandbox):

import '@testing-library/jest-dom';
import { render } from "@testing-library/react";
import * as React from "react";
import { Column } from '../column/Column';
import { DataTable } from './DataTable';

describe('DataTable', () => {
    test('should display data with Column without field', () => {
        // Arrange
        const { container } = render(<DataTable dataKey={"key"} value={[{ key: 0 }, { key: 2 }]}>
            <Column
                header="Column 1"
                body={(row) => <div>This is column 1 for item {row.key}</div>}
            />
            <Column
                header="Column 2"
                body={(row) => <div>This is column 2 for item {row.key}</div>}
            />
        </DataTable>
        );

        // Assert
        expect(container).toHaveTextContent('This is column 1 for item 0');
        expect(container).toMatchSnapshot();
    });
});

Reproducer

https://codesandbox.io/s/primereact-test-forked-btleh6

PrimeReact version

9.2.3

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

Definitely a bug..great reproducer.

[melloware]

Interesting trying to reproduce it in the Showcase which is NextJS it seems to be working.

Still investigating.

[melloware]

Weird it works in Vite on StackBlitz also: https://stackblitz.com/edit/react-rhjloz?file=src%2FApp.js

[ghostd]

@melloware i found the difference (but not the actual explanation) between the CodeSandbox sample and the StackBlitz sample, the React strict mode. I you add the <React.StrictMode/> into the code sandbox, the code works; if you remove the <React.StrictMode/> from StackBlitz, the code fails.

[melloware]

OK good we have seen other Strict Mode issues in the past as well. I marked it as "React 18" label and that will help us look for the issue.

[ghostd]

The Strict mode seems to involve a second rendering phase, which makes the code work. It could be a bug with badly initialised state?

[melloware]

yep that is what it has been before something not initializing defensively. You can see some other StrictMode issues we have fixed before in this list: https://github.com/primefaces/primereact/issues?q=is%3Aissue+label%3A%22React+18%22+is%3Aclosed

[ghostd]

I think it's related to the d_filtersState state... still investigating.

[melloware]

OK can you try my fix.

[melloware]

Sorry just posted: #4280

Can you try that and let me know. Locally it seems to be working in Strict Mode and non Strict Mode

[melloware]

the useMount effect is usually the culprit in React Strict Mode 18 issues.

[ghostd]

It works for me, thanks.