TypeError: ‘addcart’ is not a function in reactjs?

I made a page that contains products and they should add to the cart. But after connecting the backend from asp.net core to the products page, add to cart button is not working on the Product.js page.

TypeError: addCart is not a function
onClick
src/Component/section/Products.js:56
  53 |             </h3>
  54 |             <span>LKR {product.price}</span>
  55 |             <p>{product.description}</p>
> 56 |             <button onClick={()=> addCart(product.itemID)}>Add to cart</button>
     | ^  57 |         </div>
  58 |     </div>
  59 | ))
View compiled

context.js

import React, { Component } from 'react'

export const DataContext = React.createContext();

export class DataProvider extends Component {
 state = {
        products: [
        
            
        ],
        cart: [],
        total: 0
        
    };

    addCart = (id) =>{
        const {products, cart} = this.state;
        const check = cart.every(item =>{
            return item.itemID !== id
        })
        if(check){
            const data = products.filter(product =>{
                return product.itemID === id
            })
            this.setState({cart: [...cart,...data]})
        }else{
            alert("The product is already in the cart ")
        }
    };

    reduction = id =>{
        const { cart } = this.state;
        cart.forEach(item =>{
            if(item.itemID === id){
                item.count === 1 ? item.count = 1 : item.count -=1;
            }
        })
        this.setState({cart: cart});
        this.getTotal();
    };

    increase = id =>{
        const { cart } = this.state;
        cart.forEach(item =>{
            if(item.itemID === id){
                item.count += 1;
            }
        })
        this.setState({cart: cart});
        this.getTotal();
    };

    removeProduct = id =>{
        if(window.confirm("Do you want to delete this product?")){
            const {cart} = this.state;
            cart.forEach((item, index) =>{
                if(item.itemID === id){
                    cart.splice(index, 1)
                }
            })
            this.setState({cart: cart});
            this.getTotal();
        }
       
    };

    getTotal = ()=>{
        const{cart} = this.state;
        const res = cart.reduce((prev, item) => {
            return prev + (item.price * item.count);
        },0)
        this.setState({total: res})
    };
    
    componentDidUpdate(){
        localStorage.setItem('dataCart', JSON.stringify(this.state.cart))
        localStorage.setItem('dataTotal', JSON.stringify(this.state.total))
    };

    componentDidMount(){
        const dataCart = JSON.parse(localStorage.getItem('dataCart'));
        if(dataCart !== null){
            this.setState({cart: dataCart});
        }
        const dataTotal = JSON.parse(localStorage.getItem('dataTotal'));
        if(dataTotal !== null){
            this.setState({total: dataTotal});
        }
    }
   

    render() {
        const {products, cart,total} = this.state;
        const {addCart,reduction,increase,removeProduct,getTotal} = this;
        return (
            <DataContext.Provider 
            value={{products, addCart, cart, reduction,increase,removeProduct,total,getTotal}}>
                {this.props.children}
            </DataContext.Provider>
        )
    }
}

Products.js

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import {DataContext} from '../Context'
import '../css/Products.css'
import axios from 'axios';


export class Products extends Component {
   
    static contextType = DataContext;
    

   constructor(props) {
        super(props);
        this.state = { products: [] } 
    }
    async componentDidMount() {
        try {
            const res = await axios.get('https://localhost:5001/api/Items');
            console.log("he, he", res.data);
            this.setState({ products: res.data });
            //this.state.products = res.data;
            console.log("uu", this.state.products);
        } catch (error) {
            console.log('er er', error)
        }
    
    

    
    }

    render() {
       const {products, addCart} = this.state;
     //const { products} = this.state;
   // const {addcart} =this;
 

        return (
            
            <div id="product">
                
               {
                   
                   products.map(product =>(
                       <div className="card" key={product.itemID}>
                           <Link to={`/product/${product.itemID}`}>
                               <img src={`https://localhost:5001/${product.src}`} alt=""/>
                           </Link>
                           <div className="content">
                               <h3>
                                   <Link to={`/product/${product.itemID}`}>{product.title}</Link>
                               </h3>
                               <span>LKR {product.price}</span>
                               <p>{product.description}</p>
                               <button onClick={()=> addCart(product.itemID)}>Add to cart</button>
                           </div>
                       </div>
                   ))
               }
            </div>
        )
    }
}

export default Products;

Also there is a problem in this details.js page backend data is showing on console.But it does not displaying as a user interface in frontend.

Details.js

   import React, { Component } from 'react'
import {DataContext} from '../Context'
import {Link} from 'react-router-dom'
import Colors from './Colors'
import '../css/Details.css'
import axios from 'axios';



export class Details extends Component {
    static contextType = DataContext;
   
    constructor(props) {
        super(props);
        this.state = { products: [] } 
    }

    async componentDidMount() {
        this.getProduct();
        try {
            var id =this.props.match.params.id;
            const res = await axios.get(`https://localhost:5001/api/Items/${id}`);
            console.log("he, he", res.data);
            this.setState({ products: res.data });
            this.state.products.id = res.data;
            console.log("uu", this.state.products.itemID);
        } catch (error) {
            console.log('er er', error)
        }
    
    

    
    }


    getProduct = () =>{
        if(this.props.match.params.id){
            const res = this.state.products;
            const data = res.filter(item =>{
                return item.id === this.props.match.params.id
            })
            this.setState({products: res.data});
            this.state.products.id = res.data;
        }
    };

    // componentDidMount(){
    //     this.getProduct();
    // }


    // constructor(props) {
    //     super(props);
    //     this.state = { products: [] } 
    // }
    
    render() {
        const {product} = this.state;
       // const {addCart} = this.context;
        return (
            <>
                {
                   product && product.length!=0 ? product.map(item =>(
                        <div className="details" key={item.itemID}>
                           <Link to={`/item/${item.itemID}`}>
                               <img src={`https://localhost:5001/${item.src}`} alt=""/>
                           </Link>
                            <div className="box">
                                <div className="row">
                                    <h2> <Link to={`/item/${item.itemID}`}>{item.title}</Link></h2>
                                    <span>LKR {item.price}</span>
                                </div>
                                {/* <Colors colors={item.colors}/> */}
                                <p>{item.description}</p>
                                <p>{item.content}</p>
                                {/* <Link to="/cart" className="dcart" onClick={() => addCart(item.itemID)}>
                                    Add to cart
                                </Link> */}
                            </div>
                        </div>
                    ))
                :''}
            </>
        )
    }
}

export default Details

Cart.js

import React, { Component } from 'react'
import {DataContext} from '../Context'
import {Link} from 'react-router-dom'
import Colors from './Colors'
import '../css/Details.css'
import '../css/Cart.css'
import { Button } from '../Button/Button'
import StripeCheckout from 'react-stripe-checkout'
import axios from 'axios';
import {toast} from 'react-toastify';
import GooglePayButton from '@google-pay/button-react';


export class Cart extends Component {
    
   
    static contextType = DataContext;
    
    
    componentDidMount(){
        this.context.getTotal();
        toast.configure();
    }
    
    render() {
        const {cart,increase,reduction,removeProduct,total} = this.context;
       
        
       async function handleToken(token, addresses){
            //console.log({token, addresses})
            const response = await axios.post('https://iemcj.sse.codesandbox.io/checkout', {
                token,
                //item
            });
            const {status} =response.data
            if (status === 'success'){
                toast('Success! Check emails for details',
                {type: 'success'})
            } else{
                toast('Something went wrong',
                {type: 'error'})

           }

        }
        if(cart.length === 0){
            return <h2 style={{textAlign:"center"}}>Your Cart is Empty</h2>
        }else{
            return (
                <>
                    {
                        cart.map(item =>(
                            <div className="details cart" key={`https://localhost:5001/${item.itemID}`}>
                                <img src={`https://localhost:5001/${item.src}`} width="400" alt=""/>
                                <div className="box">
                                    <div className="row">
                                        <h2>{item.title}</h2>
                                        <span>LKR {item.price * item.count}</span>
                        </div>
                                    <Colors colors={item.colors}/>
                                    <h4>{item.description}</h4>
                                    <p>{item.content}</p>
                                    <div className="amount">
                                        <button className="count" onClick={() => reduction(item.itemID)}> - </button>
                                        <span>{item.count}</span>
                                        <button className="count" onClick={() => increase(item.itemID)}> + </button>
                                    </div>
                                </div>
                                <div className="delete" onClick={() => removeProduct(item.itemID)}>X</div>
                               
                            </div>
                            
                        ))
                        }
                    
                    
                    <div className="total">
                        {/* <Link to="/checkout">Payment</Link> */}
                         
                        
                        <GooglePayButton
                        environment="TEST"
                        paymentRequest={{
                            apiVersion:2,
                            apiVersionMinor:0,
                            allowedPaymentMethods: [
                                {
                                    type: 'CARD',
                                    parameters:{
                                        allowedAuthMethods: ['CRYPTOGRAM_3DS', 'PAN_ONLY'],
                                        allowedCardNetworks: ['MASTERCARD', 'VISA'],
                                    },
                                    tokenizationSpecification:{
                                        type: 'PAYMENT_GATEWAY',
                                        parameters: {
                                            gateway: 'example',
                                            gatewayMerchantID: 'exampleGatewayMerchantID',
                                        },
                                    },
                                },
                            ],
                            merchantInfo: {
                                merchantId: '12345678901234567890',
                                merchantName:'Example Merchant',
                            },
                            transactionInfo:{
                                totalPriceStatus:'FINAL',
                                totalPriceLabel: 'Total',
                                totalPrice:`${total}`,
                                currencyCode:'LKR',
                                countryCode:'LK',
                            },
                            shippingAddressRequired:true,
                            callbackIntents:['SHIPPING_ADDRESS','PAYMENT_AUTHORIZATION'],
                        }}
                        onLoadPaymentData={paymentRequest => {
                            console.log('Success', paymentRequest);
                        }}
                        onPaymentAuthorized={paymentData => {
                            console.log('Payment Authorised Success', paymentData)
                            return { transactionState: 'SUCCESS'}
                        }}
                        onPaymentDataChanged={paymentData => {
                            console.log('On Payment Data Changed', paymentData)
                            return { }
                        }}
                        existingPaymentMethodRequired='false'
                        buttonColor='black'
                        buttonType='buy'
                        
                        
                        />
                           
                        
                        <h3>Total: LKR {total}</h3> 
                    </div>
                </>
                )
            }
        }
}

export default Cart

Section.js

import React, { Component } from 'react'
import Products from './section/Products'
import Details from './section/Details'
import {Route} from "react-router-dom"
import Cart from './section/Cart'
import Payment from './section/Payment'
import Confirmation from './Payment/Confirmation'
import {Link} from 'react-router-dom'

import '../Component/Section.css'


class Section extends React.Component{
    render(){
      return(
          <div className="section">
        <section>
                    <Route path="/product" component={Products} exact  />
                    <Route path="/product/:itemID" component={Details} exact />
                    <Route path="/cart" component={Cart}  exact/>
                    <Route path="/payment" component={Confirmation} exact />

         </section>
         </div>   
        )
    
    }
}

export default Section

Answer

in Details.js this.setState({ products: res.data }); ===> this.setState({ product: res.data });. and use condition:

 {product && product.length!=0 ? product.map(product =>///your code) :'' }