'Key' warning in antd table component when trying to load Skeleton while loading

Question

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

Answer 1

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);
}