Warning: Encountered two children with the same key, `[object Object]1`

the addItem function is not working, it's giving that error:

Warning: Encountered two children with the same key, [object Object]1. Keys should be unique so that components 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.

the addItem() is in app.js

App.js:

import './App.css';
import React, {Component} from 'react';
import Items from './components/item/items'
import AddItem from './components/addItem/addItem'
import Total from './components/total/total'

class App extends Component {
  state = {
    items: [
      {id:1, product:'Pen', price:2},
      {id:2, product:'Book', price:10}
    ]
  }

  deleteItem = (id) => {
    let items = this.state.items
    let i = items.findIndex(item => item.id === id)
    items.splice(i, 1)
    this.setState({items: items})
  }

  
   addItem = () => {
  const { items } = this.state;
  const id = items.length ? items[items.length - 1] + 1 : 1;
  this.setState({ items: [...items, { id }] });
};
  
addItem2 = (item) => {
  this.state.items.length > 0 ? (
    item.id = this.state.items[this.state.items.length - 1].id + 1 
  ) : item.id = 1
  console.log(item.id)
  let items = this.state.items
  items.push(item)
  this.setState({items: items})
}

  render() {
    return (
      <div className="container">
        <h1>Product List React App</h1>
        <div className="table">
          <Items items={this.state.items} del={this.deleteItem} add={this.addItem}/>
          <AddItem add={this.addItem2}/>
          <Total items={this.state.items}/>
          
        </div>
      </div>
    )
  }
}

export default App;

the items.js:

import React from 'react';

const Items = (props) => {
    const {items, del,add} = props;
    let length = items.length
    const ListItem = length ? (
        items.map(item => {
            return(
                <div key={item.id} className="item">
                    <p  onClick={()=>add(item.id)}>+</p>
                    
                    <p>{item.product}</p>
                    <p>{item.price}</p>
                    <p className="delete" onClick={() => del(item.id)}>&times;</p>
                    
                </div>
            )
        })
    ) : (
        <div className="text">There are no items, Try to add some.</div>
    )
    return (
        <div>
            <div className="header item">
                <p>quantity</p>
                
                <p>Product</p>
                <p>Price</p>
                
                <p>Edit</p>
                
            </div>
           
            {ListItem}
        </div>
    )
}

export default Items

the total.js:

import React from 'react';

const Total = (props) => {
    const {items} = props;
    let total = 0
    for (let i = 0; i < items.length; i++) {
        total += parseFloat(items[i].price)
    }
    return (
        <div>
            <p className="text">Total Price: {total}</p>
        </div>
    )
}

export default Total

You have a mistake within your addItem function. You are accessing the whole object instead of its id property.

const items = [
  {id:1, product:'Pen', price:2},
  {id:2, product:'Book', price:10}
];

// your id
const id = items.length ? items[items.length - 1] + 1 : 1;
console.log(id);
// should be 
const id2 = items.length ? items[items.length - 1].id + 1 : 1;
console.log(id2);

Since items[items.length - 1] is an object and not a primitive, it gets transformed into [object Object] when concatenating with a number.

Something like:

addItem = () => {
  const { items } = this.state;
  const id = items.length ? (items[items.length - 1].id + 1) : 1;
  this.setState({ items: [...items, { id }] });
};