CODEWITHSUNDEEP
reactjs
ktakon
ktakon

Reputation: 27

Getting unique key error even I put the key all components

I put the key prop to parent component but it gives unique key error. Even I put the key props to every element still getting this error. How can I fix this problem?

{orders &&
            orders.slice(0).reverse().map((order) =>

              order.order_type === 'PickupOrders' && 
                <Row key={uuidv4()} align="middle" style={{ height: '6vh', borderBottom: '1px solid #e6ebe7' }} justify="center" >
                  
                  <Col span={9} key={uuidv4()} >
                    <p key={uuidv4()} style={{ marginBottom: 'auto', marginTop: 'auto' , textAlign:'center'}}>{order.customer_fullname}</p>
                  </Col>
                  <Col span={9} key={uuidv4()}>
                    <p key={uuidv4()} style={{ marginBottom: 'auto', marginTop: 'auto' , textAlign:'center'}} >{order.order_status}</p>
                  </Col>
                  <Col span={6}  key={uuidv4()}>
                    <p key={uuidv4()} style={{ marginBottom: 'auto', marginTop: 'auto' , textAlign:'center'}} >{order.total_price}</p>
                  </Col>
                </Row>
              
            )}


{counter > 0 &&
            _.times( counter , (i) => (
              <div style={{ height: '6vh', borderBottom: '1px solid #e6ebe7' }} >
                <Dropdown
                  key={uuidv4()}
                  overlay={menu( PickUpOrder(orders, counter - i), openModalFunc)}
                  placement='bottomCenter'
                  trigger={['click']}
                >
                  <IconButton
                    color='primary'
                    aria-label='add an alarm'
                  >
                    <MoreVertIcon />
                  </IconButton>
                </Dropdown>
              </div>
            ))
          }

Upvotes: 1

Views: 59

Answers (1)

configtheworld
configtheworld

Reputation: 314

The first part looks fine. When you map or _.times in order to iterate arrays or array of objects, key attribute should be in top tag. In your case;

 _.times( counter , (i) => (
              <div style={{ height: '6vh', borderBottom: '1px solid #e6ebe7' }} key={uuidv4()}> {/* <---- */}
                <Dropdown
                  overlay={menu( PickUpOrder(orders, counter - i), openModalFunc)}
                  placement='bottomCenter'
                  trigger={['click']}
                > ...

I hope it works fine.

Upvotes: 2

Related Questions