Blueprint: Table | React warning with parentCellWidth / parentCellHeight property

[mickaelmartinsdev]

Versions :
"@blueprintjs/icons": "^2.2.1",
"@blueprintjs/core": "^2.3.1",
"@blueprintjs/datetime": "^2.0.3",
"@blueprintjs/table": "^2.1.1",
"react": "^16.2.0",

Steps to reproduce

I have a table with checkboxes in the first column.

Actual behavior

In console, I have this exception raised :
Warning: React does not recognize the parentCellWidth prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase parentcellwidth instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in input (created by Control)
in label (created by Control)
in Control (created by Blueprint2.Checkbox)
in Blueprint2.Checkbox (created by TableBodyCells)
in div (created by Cell)
in LoadableContent (created by Cell)
in div (created by Cell)
in Cell (created by TableBodyCells)
in div (created by TableBodyCells)

Thank-you.

[giladgray]

@mickaelmartinsdev should be easy to submit a fix to remove that prop from a spread. would you mind doing so?

[gasolin]

could modify to only pass parentCellHeight/parentCellWidth to TruncatedFormat
https://github.com/palantir/blueprint/blob/develop/packages/table/src/cell/cell.tsx#L145

        const modifiedChildren = React.Children.map(this.props.children, child => {
            if (
                (style != null && React.isValidElement(child)) ||
                CoreUtils.isElementOfType(child, JSONFormat)
            ) {
                return React.cloneElement(child as React.ReactElement<any>);
            } else if (CoreUtils.isElementOfType(child, TruncatedFormat)) {
              return React.cloneElement(child as React.ReactElement<any>, {
                parentCellHeight: parseInt(style.height, 10),
                parentCellWidth: parseInt(style.width, 10),
              });
            }
            return child;
        });

[hari5004]

@giladgray is there any fix available for this warning

[smithdalec]

As a workaround, I found that I can wrap the contents of the cell containing additional elements in <React.Fragment> to get the error to stop.

It's terrible, but less terrible than seeing Javascript errors in my console on every page load.

[nagylzs]

I'm also having this error. Very annoying.

[jq153387]

Making the target element into a Component and inheriting the Cell props {...this.props.children} solves this problem.

Look like.

<Lock {...this.props.children} />

const Lock = props => (
    <div
        style={{
            textAlign: "center"
        }}
    >
           <FontAwesomeIcon icon="lock" color="#333333" />
    </div>
);

class Tablebody extends Component {
....
cellRenderer = (rowIndex, columnIndex) => {
        const column = columns[columnIndex].dataIndex;
        const row = this.props.filterData[rowIndex];
        const cell = row[column];
        const cellKey = `cell_${columnIndex}_${row.key}`;
        if (column != "lock") {
            return <Cell key={cellKey}>{cell}</Cell>;
        } else {
            return (
                <Cell key={cellKey}>
                    <Lock {...this.props.children} />
                </Cell>
            );
        }
    };
....