facebookarchive / fixed-data-table

A React table component designed to allow presenting thousands of rows of data.
http://facebook.github.io/fixed-data-table/
Other
4.3k stars 553 forks source link

Warning: Unknown prop `columnKey` when there is no columnKey prop #420

Closed Robertmw closed 8 years ago

Robertmw commented 8 years ago

Hi, I'm using Fixed Data Table for 2 weeks now and today I added a class on the cell to be able to get the cell content in some unit tests. Since I added that class property to I'm keep getting this Warning either I remove the class or not.

Warning: Unknown prop columnKey on

tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop in div (created by FixedDataTableCellDefault) in FixedDataTableCellDefault (created by VNF Table) in div (created by FixedDataTableCell) in FixedDataTableCell (created by FixedDataTableCellGroupImpl) in div (created by FixedDataTableCellGroupImpl) in FixedDataTableCellGroupImpl (created by FixedDataTableCellGroup) in div (created by FixedDataTableCellGroup) in FixedDataTableCellGroup (created by FixedDataTableRowImpl) in div (created by FixedDataTableRowImpl) in div (created by FixedDataTableRowImpl) in FixedDataTableRowImpl (created by FixedDataTableRow) in div (created by FixedDataTableRow) in FixedDataTableRow (created by FixedDataTable) in div (created by FixedDataTable) in div (created by FixedDataTable) in FixedDataTable (created by TransitionTable) in TransitionTable (created by VNF Table) in div (created by VNF Table)

Cell Component:

const TextCell = ({rowIndex, data, col}) => (
  <Cell className = {col + '-' + rowIndex} >
    { data.getObjectAt(rowIndex)[col] }
  </Cell>
);

Chrome debugger:

... className: "fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" columnKey: undefined ...

Any ideas how can I fix it?

wcjordan commented 8 years ago

Hey @Robertmw the maintainers of this repo haven't been active lately, but we have a fork here which actually just merged in a pull request which I believe will fix this issue. We're on npm as fixed-data-table-2 and should be pushing a version with the fix shortly.

@KamranAsif can you comment here when we publish 0.6.7 for fixed-data-table-2?

Robertmw commented 8 years ago

Thank you, @wcjordan! I'll replace it and if everything will be ok i'll close this issue. If not, I'll just move it to the forked repo :smile:

zpao commented 8 years ago

Let's leave the issue open. We'll want to fix it here too soon :) The fix they have in the fork is definitely a correct fix.

kevinaltschuler commented 7 years ago

Just updated I should be on v0.6.0

I'm still getting this error using the cell like this

const EditCell = ({ rowIndex, data, onChange }) => {
  if (!data) {
    return (
      <div>
        error rendering Cell
      </div>
    );
  }
  return (
    <Cell>
      <Editor
        onChange={(c) => {
          if (data[rowIndex]) {
            const newData = data;
            newData[rowIndex].text = c.html;
            onChange(() => ({
              data: newData,
            }));
          }
        }}
        options={{ buttons: ['bold', 'italic', 'underline'] }}
      />
    </Cell>
  );
};

although the error is coming from a div rather than tag in RobertMW's case

warning.js:36 Warning: Unknown prop `columnKey` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by TableBlock)
    in div (created by FixedDataTableCell)
    in FixedDataTableCell (created by FixedDataTableCellGroupImpl)
    in div (created by FixedDataTableCellGroupImpl)
    in FixedDataTableCellGroupImpl (created by FixedDataTableCellGroup)
    in div (created by FixedDataTableCellGroup)
    in FixedDataTableCellGroup (created by FixedDataTableRowImpl)
    in div (created by FixedDataTableRowImpl)
    in div (created by FixedDataTableRowImpl)
    in FixedDataTableRowImpl (created by FixedDataTableRow)
    in div (created by FixedDataTableRow)
    in FixedDataTableRow (created by FixedDataTable)
    in div (created by FixedDataTable)
    in div (created by FixedDataTable)
    in FixedDataTable (created by TransitionTable)

(theres more in the stacktrace but thats the end of the FixedDataTable references)

kevinaltschuler commented 7 years ago

Fixed! the problem was that I was giving <div/> as the prop header of Column and Column must pass props to whatever element it gets as header