score:1

Accepted answer

if you want clickable child nodes to not trigger parent node (event-bubbling) then you can use event.stoppropagation().

here is a small running example:

class app extends react.component {
  anchor = () => console.log("anchor");

  button = e => {
    e.stoppropagation();
    console.log("button");
  };

  render() {
    return (
      <div>
        <div>
          <a
            onclick={this.anchor}
            style={{ border: "1px solid", padding: "15px" }}
          >
            i'm an anchor
            <button onclick={this.button}>button</button>
          </a>
        </div>
      </div>
    );
  }
}

const root = document.getelementbyid("root");
reactdom.render(<app />, root);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

score:0

what are you trying to achieve exactly?

if you are trying to update state or complete some action from the button click you can do this from the function you defined:

addtofavourites = () => {
  this.setstate({"somestateproperty": "update"})
}

if you are trying to update state or click the tag by clicking the star i would suggest adding some additional detail as to what you are trying to do. if you want to update styling or something then you should be able to update state of torender on click of the star.


Related Query

More Query from same tag