this is my screen i have a component(Product) that is clickable. one of his children is a button too. but when i click it, the Product's function executes. how can i excepts my button to seperatly execute?

                    <ProductForm>
                   {
                       this.state.list.map((obj)=>{
                           return <Product
                           onselect={()=>{
                               this.select(obj.id)
                            }}
                           ondlt={()=>{this.dlt(obj.id)}}
                           key={obj.id}
                           obj={obj}/>
                       })
                   }
                </ProductForm>

// his child button:

delet

CodePudding user response：

Just separate them into different sections and put the child button on top with position: absolute here is a sandbox example I made to show that

Example