Image showing structure of the Table in ReactDevTool

This picture shows the portion of the structure of antd Table. Its giving me this error: Warning: Each child in a list should have a unique "key" prop. Check the render method of Body.

As you can see from the picture - every component has a key. But its still dropping this error. I have tried adding rowKey but its not helping.

Snippet of the code -

// other code here
  } else if (this.state.processing) {
      let dataSke = [];
      for (let i = 0; i < 1; i  ) {
        let y = {};
        y.title = <Skeleton.Input key={uuidv4()} style={{ width: "300px" }} />;
        y.topic_name = <Skeleton.Input key={uuidv4()} style={{ width: "200px" }} />;
        y.type = <Skeleton.Input key={uuidv4()} style={{ width: "100px" }} />;
        dataSke.push(y);
      }
      // console.log(dataSke);
      return (
        <>
          <Table
          rowKey={obj => obj.id}
            columns={this.columns}
            dataSource={dataSke}
            rowSelection={rowSelection}
          />
        </>
      );
// other code here

CodePudding user response：

You have to add key according to the documentation

for (let i = 0; i < 1; i  ) {
  let y = {};
  y.key = uuidv4();
  y.title = <Skeleton.Input style={{ width: "300px" }} />;
  y.topic_name = <Skeleton.Input style={{ width: "200px" }} />;
  y.type = <Skeleton.Input style={{ width: "100px" }} />;
  dataSke.push(y);
}