title: index.js:1 Warning: Each child in a list should have a unique "key" prop
body: <p>I am studying reactjs and want to use Ant Design together, but now sure how to set rowKey in antd table. I have set it by using primary key from data source, but not sure why still got this error:</p>
  <p>index.js:1 Warning:
  Each child in a list should have a unique &quot;key&quot; prop.</p>
  <p>Any help is appreciated.</p>
  <pre><code>class DoctorList extends Component {
      constructor(props){
          super(props);
          this.state = {
              pageNumber: 1,
              pageSize: 10,
              keyWork:&quot;&quot;,
              // modal: cancel notification 
              visible:false,
              doctorID:&quot;&quot;,
              // table header
              columns:[
                  {title:&quot;DoctorID&quot;, dataIndex:&quot;doctorID&quot;, key:&quot;doctorIdMenu&quot;, width:100},
                  {title:&quot;First Name&quot;, dataIndex:&quot;firstName&quot;, key:&quot;firstName&quot;},
                  {title:&quot;Last Name&quot;, dataIndex:&quot;lastName&quot;, key:&quot;lastName&quot;},
                  {title:&quot;Medical Center&quot;, dataIndex:&quot;medicalCenter&quot;, key:&quot;medicalCenter&quot;},
                  {title:&quot;Management&quot;, dataIndex:&quot;management&quot;, key:&quot;management&quot;, width:200,
                      render:(text, rowData) =&gt;{
                          return(
                              &lt;div&gt;
                                  &lt;Button className=&quot;delDoctorButton&quot; onClick={()=&gt;this.delDoctor(rowData.doctorID)} &gt;Delete&lt;/Button&gt;
                                  &lt;Button className=&quot;planButton&quot; type=&quot;primary&quot;&gt;
                                      &lt;Link to={{pathname: &quot;/index/plan&quot;, state:{doctorid: rowData.doctorID}}} &gt;Plan&lt;/Link&gt;
                                  &lt;/Button&gt;
                              &lt;/div&gt;
                          )
                      } 
                  }   
              ],
              // tabel data
              data:[{},],   
          };
      }
      // load data 
      componentDidMount() {
          this.loadData();
      }
      // get doctor list
      loadData = () =&gt; {   
          axios.get(`http://localhost:80/doctor-admin/src/api/api?action=readDoctorName`,{withCredentials:true})
          .then(res =&gt; {
              console.log(res.data);
              const doctors = res.data;
  
              if(doctors){
                  this.setState({ 
                      data:doctors 
                  });
              }   
          })
          .catch((error) =&gt; {
              console.log(error)
          });
      }
  
      render(){
          const { columns, data } = this.state;
          return(
              &lt;Fragment&gt;
                  &lt;a className=&quot;addDoctor&quot; style={{display: &quot;table-cell&quot;}} href = &quot;/index/add&quot;&gt;
                      &lt;Button className=&quot;addDoctorButton&quot; type=&quot;primary&quot; htmlType=&quot;submit&quot;&gt;
                          Add New Doctor
                      &lt;/Button&gt;
                  &lt;/a&gt;
                  &lt;Table rowKey={record=&gt; record.doctorID} columns={columns} dataSource={data} bordered /&gt;
              &lt;/Fragment&gt;
          )
      }
  }
  export default DoctorList;
  </code></pre>
  <p>and this is my data:
  <a href="https://i.stack.imgur.com/Wi3lF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wi3lF.jpg" alt="enter image description here" /></a></p>