Error: Each child in a list should have a unique "key" prop

Question

I am working on React-Map-GL and I am super new on it. I've added this code to my react-app but getting an error like this:

It uses: "eslint-config-airbnb"

Thank you in advance

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

    import React from 'react'
    import { Collapse, Descriptions } from 'antd'
    import styles from './style.module.scss'

    import data from '../data.json'

    const { Panel } = Collapse

    function callback(key) {
      console.log(key)
    }

    class InboxPacks extends React.Component {
      state = {
        inboxPackages: data.inboxPackages,
      }

      render() {
        const { inboxPackages } = this.state
        return (
          <div>
            <Collapse bordered={false} onChange={callback} className={styles.inbox}>
              {inboxPackages.map((item, index) => (
                <Panel
                  key={index.toString()}
                  header={[<span>{item.name}</span>, <small>{item.received}</small>]}
                  extra={[
                    <span>{item.weight} lb</span>,
                    <small>
                      {item.dimensions} {`in`}
                    </small>,
                  ]}
                >
                  <Descriptions layout="vertical" className={styles.descriptionsPanel}>
                    <Descriptions.Item label="Courier" className={styles.volkan}>
                      {item.courier}
                    </Descriptions.Item>
                    <Descriptions.Item label="Tracking Number">{item.tracking}</Descriptions.Item>
                    <Descriptions.Item label="Storage Left">{item.storageLeft}</Descriptions.Item>
                    <Descriptions.Item label="Customs Value">{`$${item.customsValue}`}</Descriptions.Item>
                    <Descriptions.Item label="Content">{item.content}</Descriptions.Item>
                  </Descriptions>
                </Panel>
              ))}
            </Collapse>
          </div>
        )
      }
    }

    export default InboxPacks

Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Matt Dalzell, Aug 02 '19 at 14:49
Judging by your error log, the problem seems to come from the `span` in the extra prop of your `Panel` (line 28), could you try adding a `key` prop to it ? Or is the prop not supposed to contain an array ? — Treycos, Aug 02 '19 at 14:50

Ponpon32 · Answer 1 · 2019-08-02T15:32:16.417

This is related to the header and extra props - as you can see they are arrays, try to add key property to each element inside the array.

Try this:

import React from 'react'
import { Collapse, Descriptions } from 'antd'
import styles from './style.module.scss'

import data from '../data.json'

const { Panel } = Collapse

function callback(key) {
  console.log(key)
}

class InboxPacks extends React.Component {
  state = {
    inboxPackages: data.inboxPackages,
  }

  render() {
    const { inboxPackages } = this.state
    return (
        <div>
          <Collapse bordered={false} onChange={callback} className={styles.inbox}>
            {inboxPackages.map((item, index) => (
                <Panel
                    key={`panel_${index}`}
                    header={[<span key={`header_span_${index}`}>{item.name}</span>, <small key={`header_small_${index}`}>{item.received}</small>]}
                    extra={[
                      <span key={`extra_span_${index}`}>{item.weight} lb</span>,
                      <small key={`extra_small_${index}`}>
                        {item.dimensions} {`in`}
                      </small>,
                    ]}
                >
                  <Descriptions layout="vertical" className={styles.descriptionsPanel}>
                    <Descriptions.Item label="Courier" className={styles.volkan}>
                      {item.courier}
                    </Descriptions.Item>
                    <Descriptions.Item label="Tracking Number">{item.tracking}</Descriptions.Item>
                    <Descriptions.Item label="Storage Left">{item.storageLeft}</Descriptions.Item>
                    <Descriptions.Item label="Customs Value">{`$${item.customsValue}`}</Descriptions.Item>
                    <Descriptions.Item label="Content">{item.content}</Descriptions.Item>
                  </Descriptions>
                </Panel>
            ))}
          </Collapse>
        </div>
    )
  }
}

export default InboxPacks

You can add attribute key for each element inside the array - because you are using ```map``` I would recommend to join the iteration index to the key string. — Ponpon32, Aug 02 '19 at 15:02
thank so much for your response. I am getting following error: ./src/pages/inbox/InboxPacks/index.js Line 27: Do not use Array index in keys react/no-array-index-key Line 28: Do not use Array index in keys react/no-array-index-key Line 31: Do not use Array index in keys react/no-array-index-key Line 32: Do not use Array index in keys react/no-array-index-key Search for the keywords to learn more about each error. — Pratik, Aug 02 '19 at 15:09
:(( it looks same ./src/pages/inbox/InboxPacks/index.js Line 25: Do not use Array index in keys react/no-array-index-key Line 27: Do not use Array index in keys react/no-array-index-key Line 28: Do not use Array index in keys react/no-array-index-key Line 31: Do not use Array index in keys react/no-array-index-key Line 32: Do not use Array index in keys react/no-array-index-key Search for the keywords to learn more about each error. — Pratik, Aug 02 '19 at 16:06
@Pratik The `no-array-index-key` you are referring to is not a react error, it's an "error" from your eslint setup. You can choose to ignore it (probably not a good idea) or find a new value for `key`. If every `item.name` is unique you can use that. Does `item` have another unique property you can use? — Sean256, Aug 02 '19 at 18:34

Error: Each child in a list should have a unique "key" prop

1 Answers1