Add element in array by button click-CodePudding

I have product cards that are rendered based on a json file. By clicking on the "Add to Cart" button, the element should be added to the array сartList, but this does not happen. I also tried to forward the function to the component itself, but it didn’t work out too well for me.

Shop.jsx:

import React, { useState } from 'react';
import './Instruments.css';
import Cart from '../components/Cart'
import Product from '../components/Product'
import cart from '../img/cart.png';
import data from "../data/data.json";

unction Shop() {
    const [value, setValue] = useState('');
    const [currentData, setCurrentData] = useState(data);
    const [cartList, setCartList] = useState([]);

    return (
            <div className='shop'>
                <div className='container'>
                        <div className='shop__main-products'>
                            {
                                currentData.filter((el) => {
                                    return value.toLowerCase() === '' ? el : el.title.toLowerCase().includes(value.toLowerCase())
                                }).map((el, index) => {
                                    return (
                                        <Product img={el.img} title={el.title} price={el.price} key={el.id} onClick={() => setCartList([...cartList, el])}/>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <Cart active={modalActive} setActive={modalSetActive}/>
                </div>
            </div>
    );
}

export default Shop;

Product.jsx:

import React, { useState } from 'react';
import './Product.css';

function Product({img, title, price, id, type}) {
    return (
                <div className='product' key={id} type={type}>
                    <div className='buy__top'>
                        <div className='product__top-image-background'>
                            <img className='product__top-image' src={img}></img>
                        </div>
                        <h3 className='product__top-title'>{title}</h3>
                    </div>
                    <div className='product__buy'>
                        <h3 className='product__buy-price'>{price} грн</h3>
                        <button className='product__buy-button'>В корзину</button>
                    </div>
                </div>
            )
}

export default Product;

CodePudding user response：

It looks like the issue is with how you're passing the onClick function to the Product component. The onClick prop should be passed to the "Add to Cart" button, not the Product component itself. You should change the following line:

<Product img={el.img} title={el.title} price={el.price} key={el.id} addToCart={() => setCartList([...cartList, el])}/>

And in the Product component, you should add the onClick prop to the "Add to Cart" button:

<button className='product__buy-button' onClick={addToCart}>В корзину</button>

This way, when the button is clicked, it will call the addToCart function and add the element to the cartList array.

CodePudding user response：

You are not adding the onClick function to the props of the Product component pass it down the pipe and itll work.

function Product({img, title, price, id, type, onClick}) {
return (
            <div className='product' key={id} type={type}>
                <div className='buy__top'>
                    <div className='product__top-image-background'>
                        <img className='product__top-image' src={img}></img>
                    </div>
                    <h3 className='product__top-title'>{title}</h3>
                </div>
                <div className='product__buy'>
                    <h3 className='product__buy-price'>{price} грн</h3>
                    <button className='product__buy-button' onClick={onClick}>В корзину</button>
                </div>
            </div>
        )
}