React button with icon onClick presses icon and not button-CodePudding

I have a button with an icon in it. It all looks good and I though everything worked properly but then I started getting undefined behaviors. It turns out that the onClick of the button e.target return either the button press, a polygon or an SVG. It depends if I click the corner of the button, then e.target is the button, if I click on the icon I either get a e.target polygon or svg. I only want to get the button. This is the code for generating the button:

            <CButton
              color="danger"
              value={[name, name2, name3]}
              onClick={handleUnlink}>
              {<CIcon icon={cilX} />}

            </CButton>

This is the code for onClick:

const handleUnlink = (e) => {
   console.log(e.target)
};

How do I make sure that a user that accedently presses the CIcon inside the button is still only triggering a button press?

CodePudding user response：

You can use the e.currentTarget property to make sure that a user that accedently presses the CIcon inside the button is still only triggering a button press.