Parent somehow activates child button event and child button doesn't work-CodePudding

Tried to add a child-button in offconvas, but opening/closing them activates the button. And the button doesn't work itself.

Grandparent Shop.js

import React, { useState } from 'react'
import ShopAssortment from './ShopAssortment'
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

import './Shop.css'

    
export default function ShopMenu(props) {
    const [show, setShow] = useState(false);
  
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <section>
            <Button onClick={handleShow} className='open-shop-button'>
                <p className='shop-button-text'>Open shop</p>
            </Button>
            <Offcanvas show={show} onHide={handleClose} placement="bottom" className='shop'>
                <Offcanvas.Header closeButton>
                    <Offcanvas.Title><h2>Shop</h2></Offcanvas.Title>
                </Offcanvas.Header>
                <Offcanvas.Body>
                    <ShopAssortment/>
                </Offcanvas.Body>
            </Offcanvas>
        </section>
    
  )
}

Parent ShopAssortment.js

import React from 'react'
import ShopItems from './ShopItems'


export default function ShopAssortment(props) {
    const shopAssortment = [
        {item_id: 1, name: 'Item 1', price: 11, effect: 'some_effect', image: 'somePicture.png', available: true},
        {item_id: 2, name: 'Item 2', price: 123, effect: 'some_effect', image: 'somePicture.png', available: true}
    ]

    const availableAssortment = shopAssortment.filter(dict => dict.available === true)

    const handleUpgradeBuy = (bought_upgrade_id) => {
        shopAssortment.map((dict) => {
            if (dict['item_id'] === bought_upgrade_id) {
                console.log('It gets activated by parent')
                dict['available'] = false
            }
        })

    }

    return (
        <ShopItems 
            shopAssortment = {availableAssortment}
            handleUpgradeBuy = {handleUpgradeBuy}
        />
    )
}

Child ShopItems.js (The button with handleUpgradeBuy gets activated, when clicking on Grandparent(shop) bootstrap button, which opens offconvas)

import React from 'react'

export default function ShopItems(props) {
    return (
        props.shopAssortment.map((item) => {
            return ( 
                <div className='shop-items' key={item.item_id}>
                    <div className='image-bg'>
                        <img src={'./img/'   item.image} className='item-img'></img>
                    </div>
                    <div className='item-description'>
                        <h4>{item.name}</h4>
                        <p>Price: {item.price}$</p>
                        <p>{item.effect}</p>
                    <button onClick={props.handleUpgradeBuy(item.item_id)}>Publicate</button>
                    </div> 
                </div>
                )
            }
        )
    )
}

That's what I get when clicking on the grandparent button, it activates the child button. Meanwhile, the child buttons don't work:

https://i.stack.imgur.com/G5lgb.png https://i.stack.imgur.com/mDP5y.png

Maybe I don't understand some React/JS. If so, can you please point at it? Because for now I'm kinda stuck :/

Thanks in advance.

CodePudding user response：

<button onClick={() => props.handleUpgradeBuy(item.item_id)}>Publicate</button>

Helped me. It makes anon function, so it won't be activated instantly on render.