Each child in an array or iterator should have a unique “key” prop when key is set

0
votes

I'm getting 3 warnings:

  1. Warning: Each child in an array or iterator should have a unique "key" prop. in table in div (created by ModalBody) in ModalBody
  2. Warning: Each child in an array or iterator should have a unique "key" prop. in tr in thead in table
  3. 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!

2
reactjskey
try adding key value to <table className="table table-striped" key="someuniqueid"> – Jeffin
tried, but still doesn't work – Yunay Hamza
If this <tr key={idx}> does not work, your error is coming from elsewhere. – Ted
agree with Ted, Can you provide codepen or codesandbox link? – Jeffin
I found workaround, but still doesnt know what was the problem. Maybe I have to use more separated on components code. Thanks! – Yunay Hamza

2 Answers

0
votes

try adding the unique iterator index as a key: <tr key={idx}>

0
votes

I fixed my warnings with separating of my render logic.

 getFieldHistory(fieldName: string, subDeedId: number, guid: string): any {

    this.reportsDataService.getFieldHistory(fieldName, subDeedId, guid).then(fieldHistory => {

        runInAction.bind(this)(() => {
            this.modalBody = (<FieldHistoryResultUI data={fieldHistory} title={this.getResource(fieldHistory[0].fieldName)} />);

            this.showModal = true;
        });
    });
}

const FieldHistoryResultUI = (props: any) => {
    return (
    <table className="table table-striped">
        <thead>
            <tr>
                <th></th>
                <th>{props.title}</th>
            </tr>
        </thead>
        <tbody>
            {props.data.map((history: any, idx: number) => {
                return (<FieldHistoryRow key={idx} data={history} />);
            })}
        </tbody>
    </table>);
}

const FieldHistoryRow = (props: any) => {
      return (<tr><td>{props.data.date.format()}</td><td>{props.data.fieldName}</td></tr>);
}