I'm getting 3 warnings:
- Warning: Each child in an array or iterator should have a unique "key" prop. in table in div (created by ModalBody) in ModalBody
- Warning: Each child in an array or iterator should have a unique "key" prop. in tr in thead in table
- Warning: Each child in an array or iterator should have a unique "key" prop. in tr in tbody in table
I've function which set data to observable variable. I've set key on outer element when use map but I still get this warning again and again.
In render function:
<a
href="javascript:;"
onClick={() => this.getFieldHistory(field.name, 123, "123-123123-12")}
>
History
</a>
<Modal backdrop='static' autoFocus={true} show={this.showModal} onHide={this.closeModal}>
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
{this.modalBody}
</Modal.Body>
</Modal>
function which get promise from service and set tbody content to observable variable:
getFieldHistory(fieldName: string, subDeedId: number, guid: string): any {
this.reportsDataService.getFieldHistory(fieldName, subDeedId, guid).then(fieldHistory => {
runInAction.bind(this)(() => {
this.modalBody = (
<table className="table table-striped">
<thead>
<tr>
<th></th>
<th>{this.getResource(fieldName)}</th>
</tr>
</thead>
<tbody>
{
fieldHistory.map((history, idx) => {
return (
<tr key={history.date.unix().toString()}>
<td>{history.date.format()}</td>
<td>{history.fieldName} </td>
</tr>
);
})
}
</tbody>
</table>)
this.showModal = true;
});
});
}
Thanks in advance!
<table className="table table-striped" key="someuniqueid">
– Jeffin<tr key={idx}>
does not work, your error is coming from elsewhere. – Ted