How to only activate the onclick event of the top level button when having nested buttons? React.js

Question

I'll try to explain this further. I have a material-UI List component, with ListItem component that is set to button=true thus makes the whole item a button.

inside I added that inside him I have a FontAwesomeIcon. To hide the button I put it's style to visibility: "hidden" and the Icon to visibility: "visible" so it would be available to see. (little bad practice maybe, but did not though of another way).

Now, when someone presses the ListItem anywhere without the Icon, it activates the onClick of that ListItem - as it should, and it's good! but, when pressing the area where the Icon is, both OnClick events of the "Icon button" and the ListItem is called - as it should, but I don't want it to be that way.

Now, is there a way to make the small "nested" button to be "on top" of the parent button so only it's event would be called?

If not, is there a way to know from the parent onClick that it's pressed on the area without the Icon so I would call different functions based on the click area?

Also, any other idea will be gladly received as I am new to react and web in general and I'd want to have the best practices solutions.

Many thanks :)

Answer 1

This is unrelated to React. In JavaScript you can use event.stopPropagation() method to stop the propogation of event at any level. https://www.w3schools.com/JSREF/event_stoppropagation.asp#:~:text=Definition%20and%20Usage,capturing%20down%20to%20child%20elements .

Here is the example of how you would do it in React

import React from "react";
import "./styles.css";

export default function App() {
  const parentButtonHandler = () => {
    console.log("parent");
  };
  const childButtonHandler = (e) => {
    console.log("child");
    e.stopPropagation();
  };

  return (
    <div className="App">
      <button onClick={parentButtonHandler}>
        Hello CodeSandbox
        <button onClick={childButtonHandler}>
          Start editing to see some magic happen!
        </button>
      </button>
    </div>
  );
}

Answer 2

If I understand your question correctly, you got that issue because the event is bubbled. You can read this for more information: https://javascript.info/bubbling-and-capturing To solve it, you can use event.stopPropagation() in the event handler for click event on "Icon button", so the event wont be bubbled to the parent element which is the ListItem

Answer 3

I think it's bad idea to make nested buttons. it's harder to support and it makes your layout messy.

In your case you can do it based on few ideas:

1. You have two separate buttons in your ListItem

export const Comp = () => {
  return (
   <ListItem>
    <button onClick={handleOnMainClick}>mainButton</button>
    <button onClick={handleOnSecondClick}>secondButton</button>
   </ListItem>
  )
}

But it works if your buttons on left side or right side only.

2. If you want to place your functional button whatether you want you can place it by position

export const Comp = () => {
  return (
   <ListItem styles={{position: 'relative'}}>
    <button onClick={handleOnMainClick}>mainButton</button>
    <button 
      styles={{position: 'absolute', top: '50%', left: '50%'}} 
      onClick={handleOnSecondClick}>
         secondButton
     </button>
   </ListItem>
  )
}