The table has rowkey which is equal to the column "mac", but I can not get the key by record.key, it returns undefined, but record.mac works?

The table has rowkey which is equal to the column "mac", but I can not get the key by record.key, it returns undefined, but record.mac works?

• javascript
• reactjs
• antd

• there are a few properties on a react ponent that are internal to the ponent. children is one, and another is key. React defines keys for every element / ponent and uses it for rendering performance purposes – John Ruddell Commented Jul 5, 2019 at 4:23
• Please post code not an image – Dennis Vash Commented Jul 5, 2019 at 8:15

3 Answers 3

The rowKey property at Table ponent accepts a function or a string if it's a single row table:

rowKey - Row's unique key, could be a string or function that returns a string string|Function(record):string

You should always provide a function, for example, if dataSource has key property: record => record.key

<Table columns={columns} dataSource={dataSource} rowKey={record => record.key} />;

The reason is that the concept of a key is something that is controlled by React internals before your ponent gets created.

You should define props.

the <Table /> ponent will take in a columnMap that maps to your dataSource.

You will need to set a rowKey if the objects in your dataSource don't specify a key parameter:

const dataSource = [{
 id: 123,
 name: 'Karl',
 nested: { id: 456 },
 mac: "some-unique-identifier"
}, ...]

alternatively, you can append one to your data and you don't need a rowKey:

const dataSource = [{
 id: 123,
 name: 'Karl',
 nested: { id: 456 },
 key: 123,
 mac: "some-unique-identifier"
}, ...]

this requires an extra step in processing.

usage with no 'key' parameter:

render() {
  return <Table
          dataSource={dataSource}
          columns={unspecifiedColumnNames}
          rowKey={(row) => row.id || row.nested.id || row.mac} // either 123 || 456 || "some-unique-identifier"
         />
}

It seems at least in antd 4.16.13 the rowKey parameter is to be deprecated. I just append a key parameter to my dataSource manually instead of doing it in the rowKey attribute's function.