The application works pletely, but the console returns this The plete error is: Encountered two children with the same key, 1. Keys should be unique so that ponents maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

My backend laravel returning:

return $customers = DB :: table ('customers')
    -> rightJoin ('debts', 'customers.id', '=', 'debts.customer')
    -> join ('panies', 'panies.id', '=', 'debtspany')
    -> join ('addresses', 'addresses.id', '=', 'customers.address')
    -> join ('cities', 'cities.id', '=', 'addresses.city')
    -> join ('states', 'states.id', '=', 'cities.state')
    -> select ('customers. *', 'debts.debt', 'paniespany', 'addresses.streetName', 'addresses.buildingNumber', 'cities.city', 'states.uf')
    -> get ();

My frontend ReactJs:

import axios from 'axios'
import React, { Component } from 'react'
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom'

class CustomersList extends Component {

  constructor (props) {
    super(props)

    this.state = {
      customers: []
    }
  }

  ponentDidMount () {
    axios.get('/api/customers').then(response => {
      this.setState({
        customers: response.data
      })
    })
  }

  render () {
    const { customers } = this.state
    customers.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0))

    console.log(customers)

    return (
       <div className='container py-4'>
        <div className='row justify-content-center'>
          <div className='col-md-8'>
            <div className='card'>
              <div className='card-header'>
                <h4 className='list-inline-item'>All customers</h4>
              </div>

              <div className='card-body'>
                <ul className='list-group list-group-flush'>
                  {customers.map(customer => (
                    <Link
                      className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
                      to={`/customer/${customer.id}`}
                      key={customer.id}
                    >
                      {customer.name}
                    </Link>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CustomersList ```

The application works pletely, but the console returns this The plete error is: Encountered two children with the same key, 1. Keys should be unique so that ponents maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

My backend laravel returning:

return $customers = DB :: table ('customers')
    -> rightJoin ('debts', 'customers.id', '=', 'debts.customer')
    -> join ('panies', 'panies.id', '=', 'debts.pany')
    -> join ('addresses', 'addresses.id', '=', 'customers.address')
    -> join ('cities', 'cities.id', '=', 'addresses.city')
    -> join ('states', 'states.id', '=', 'cities.state')
    -> select ('customers. *', 'debts.debt', 'panies.pany', 'addresses.streetName', 'addresses.buildingNumber', 'cities.city', 'states.uf')
    -> get ();

My frontend ReactJs:

import axios from 'axios'
import React, { Component } from 'react'
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom'

class CustomersList extends Component {

  constructor (props) {
    super(props)

    this.state = {
      customers: []
    }
  }

  ponentDidMount () {
    axios.get('/api/customers').then(response => {
      this.setState({
        customers: response.data
      })
    })
  }

  render () {
    const { customers } = this.state
    customers.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0))

    console.log(customers)

    return (
       <div className='container py-4'>
        <div className='row justify-content-center'>
          <div className='col-md-8'>
            <div className='card'>
              <div className='card-header'>
                <h4 className='list-inline-item'>All customers</h4>
              </div>

              <div className='card-body'>
                <ul className='list-group list-group-flush'>
                  {customers.map(customer => (
                    <Link
                      className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
                      to={`/customer/${customer.id}`}
                      key={customer.id}
                    >
                      {customer.name}
                    </Link>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CustomersList ```

• javascript
• php
• reactjs
• laravel
• laravel-6

2 Answers 2

React Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. For more clarification check https://reactjs/docs/lists-and-keys.html

change this code

                {customers.map((customer,index) => (
                    <Link
                      className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
                      to={`/customer/${customer.id}`}
                      key={index}
                    >
                      {customer.name}
                    </Link>
                  ))}

May be your customer id is duplicating that's why you are getting warning.

In react when you map an array of elements it expects the each element to have a unique key which it uses to identify(and further diff etc) the elements so the error is because you have two elements whose key is turning out to be 1 somehow. so check why two customer elements has same customer.id. you can read more about why/how react uses keys in-depth here: https://reactjs/docs/reconciliation.html#recursing-on-children