React Ant Design Table Warning: Each child in a list should have a unique key prop

Contents

1. 1. Background
2. 2. Error Info
3. 3. Solutions
4. 4. Reasons
5. 5. References

Background

I using Ant Design Table component to accomplish my list page. I return list data to frontend, but I got some error message in browser console.

Error Info

Warning: Each child in a list should have a unique "key" prop.
Solution

Solutions

Add a field “key” to each objects of the list

[{
      key: 1,
      createTime: "2021-01-07 11:13:00",
      numberOfTopUp: 100,
      totalNumber: 100
    },
    ...
]

Reasons

Ant design defined this usage.

References

[1] Ant Design Components - Table