React unique key - Index and ID are not unique key prop

Question

I dont understand what's wrong with my unique key in a list. I have the above error :

Warning: Each child in a list should have a unique "key" prop. Check the render method of StockDataTable

This is the part of code involved :

const tBody = (
    Object.values(dataItems.dataItems).map(item =>
      <>
        <tr key={item.id}>
          <td>
            {item.name}
          </td>
          <td>
            <img src={item.image} alt='' />
          </td>
          <td>
            {item.quantity}
          </td>
          <td>
            {item.price}
          </td>
          <td>
            {item.dueDate}
          </td>
          <td>
            {item.imperative}
          </td>
          <td>
            {item.comment}
          </td>
          <td>
            <Button
              variant='link'
              onClick={event => handleEpandRow(event, item.id)}
            >
              {
                expandState[item.id]
                  ? 'Hide' : 'Show'
              }
            </Button>
          </td>
        </tr>
        <>
          {
            expandedRows.includes(item.id)
              ? <tr}>
                <td colspan='6'>
                  <div style={{ backgroundColor: '#343A40', color: '#FFF', padding: '10px' }}>
                    <h2> Details </h2>
                    <ul>
                      <li>
                        <span><b>Name:</b></span> {' '}
                        <span> {item.name}</span>
                      </li>
                      <li>
                        <span><b>Image:</b></span> {' '}
                        <span> {item.image}</span>
                      </li>
                      <li>
                        <span><b>Quantity:</b></span> {' '}
                        <span> {item.quantity} </span>
                      </li>
                      <li>
                        <span><b>Price:</b></span> {' '}
                        <span> {item.price} </span>
                      </li>
                      <li>
                        <span><b>Due date:</b></span> {' '}
                        <span> {item.dueDate} </span>
                      </li>
                      <li>
                        <span><b>Imperative:</b></span> {' '}
                        <span> {item.imperative} </span>
                      </li>
                      <li>
                        <span><b>Comment:</b></span> {' '}
                        <span> {item.comment} </span>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              : null
          }
        </>
      </>
    )
  )

  return (
    <Container>
      <Row>
        <Col>
          <h1> Stock items</h1>
        </Col>
      </Row>
      <Row>
        <Col sm={12}>
          <Table responsive variant='dark'>
            <thead>
              <tr>
                <th />
                <th>Name</th>
                <th>Image</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Due date</th>
                <th>Imperative</th>
                <th>Comment</th>
              </tr>
            </thead>
            <tbody>
              {tBody}
            </tbody>
          </Table>
        </Col>
      </Row>
    </Container>
  )

I tried to use index (even if it's depricated) but I still have the error message. I don't know if I am setting the key at the right place. item.id is must be used several times but I don't know why.

Item looks like that :

I think it's because of the ternary operator part where you attach more elements. — user14018874
– user14018874, Commented Dec 11, 2020 at 15:31
@Cursors I tried to delete this part, it does not move away the error. — Majestic
– Majestic, Commented Dec 11, 2020 at 15:37

Mantas Astra · Accepted Answer · 2020-12-11 15:46:51Z

3

What if you set the key to the first JSX tag rather than the second <tr> one? I think that's what's causes you issues because you are setting the key to the inner tag rather than the outer one. React.Fragment is the same as <>.

Object.values(dataItems.dataItems).map(item => (
  <React.Fragment key={item.id}>
    <tr>
    ... // your code
    </tr>
  </React.Fragment>
));

edited Dec 11, 2020 at 15:46

answered Dec 11, 2020 at 15:39

Mantas Astra

1,0827 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Majestic Over a year ago

It solved my issue, my mistake for forgetting that Fragment is a component... Thank you so much :D

Collectives™ on Stack Overflow

React unique key - Index and ID are not unique key prop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related