Performing onClick() action and href in <a> tag in React

Question

I am trying to count how many times an user clicked in my custom button. The button is based on <a href="/some_route"> Click me! </a>. The whole code is:

class CustomButton extends React.Component {
  render() {
    return (
      <a href={this.props.href} className="custom-button" onClick={this.props.onClick}>
        {this.props.text}
      </a>
    );
  }
}


class App extends React.Component {
  state = {
    counter: 0
  }
  
  buttonClicked = () => {
    this.setState({counter: this.state.counter + 1})
  }
  
  render() {
    return (
      <div className="container">
        <CustomButton text="Click me!" href="#" onClick={this.buttonClicked} />
        <p>
          Click counter: {this.state.counter}
        </p>
      </div>
    );
  }
}


ReactDOM.render(
  <div><App /></div>, 
  document.getElementById('react')
)

.custom-button {
  text-decoration: none;
  background-color: #3f3b38;
  color: #d8d8d8;
  padding: 10px;
  border-radius: 10px;
  transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

.custom-button:hover {
  background-color: #FCFBFB;
  color: #3f3b38;
  box-shadow: 0px 2px 6px #00000035;
}

.container {
  padding: 20px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

As you can see, if I pass href="#", onClick() action is performed. But when I pass something else, i.e. href="never-give-up", then I just go to the other page and no action is performed...

QUESTION

---

My question is 'why this happens' and how can I perform onClick() action and change page as the <a> tag does.

I would like have my code as simple as possible and do not use react-router as well.

---

Thanks for all responses!

Answer 1

The problem have not anything with react, its just that href override the onclick event. now you could still fix this problem easy.

Note: that you need to also react-router so you could still maintained the counter data, or at list save it somewhere in db or session. because after the redirect the page will refresh and all sate will be lost

Here is an example on how to do it.

class CustomButton extends React.Component {

  // this will handle your click event, inside as you see that this will handle the click event and the href rediarect to new location. So you could set both Onclick and the href togather
  clickEvent() {
    if (this.props.onClick)
      this.props.onClick();
    if (this.props.href && this.props.href != "" && this.props.href != "#")
      window.location.href = this.props.href; // rediarect after the click event has been performed.

  }
  render() {
    return ( <
      a href = "#" className = "custom-button" onClick = {this.clickEvent}> {
        this.props.text
      } <
      /a>
    );
  }
}


class App extends React.Component {
  state = {
    counter: 0
  }

  buttonClicked = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  render() {
    return ( <
      div className = "container" >
      <
      CustomButton text = "Click me!"
      href = "#"
      onClick = {
        this.buttonClicked
      }
      /> <
      p >
      Click counter: {
        this.state.counter
      } <
      /p> < /
      div >
    );
  }
}


ReactDOM.render( <
  div > < App / > < /div>, 
  document.getElementById('react')
)