get the button click event without the canvas

Question

How can i have 2 different click events for the button and the ListItem?
I'm mostly interested in the button click event without the ListItem event.

CodeSandobox DEMO

import React from "react";
import ReactDOM from "react-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

function App() {
  const handleButtonClick = () => {
    console.log("button click");
  };
  const handleListItemClick = () => {
    console.log("list click");
  };
  return (
    <ListItem button onClick={() => handleListItemClick()}>
      <button onClick={() => handleButtonClick()}>
        get only the button click
      </button>
      <ListItemText primary="without the ListItem click event..." />
    </ListItem>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

take a look at this: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation — Sandro, May 09 '19 at 15:55
I want the button click event to fire without the ListItem event to fire. — Cristian Muscalu, May 09 '19 at 15:58
Possible duplicate of [How to stop event propagation with inline onclick attribute?](https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — k3llydev, May 09 '19 at 16:03

score 1 · Accepted Answer · answered May 09 '19 at 15:59

Kindly check this

import React from "react";
import ReactDOM from "react-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

function App() {
  const handleButtonClick = e => {
    e.stopPropagation();
    console.log("button click");
  };
  const handleListItemClick = () => {
    console.log("list click");
  };
  return (
    <ListItem button onClick={() => handleListItemClick()}>
      <button onClick={e => handleButtonClick(e)}>
        get only the button click
      </button>
      <ListItemText primary="without the ListItem click event..." />
    </ListItem>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

get the button click event without the canvas

1 Answers1