[Solved] In React, how can I cause anchors to do nothing on click?

I have the following html element:

<a href onClick={() => fields.push()}>Add Email</a>

I need the href attribute so bootstrap styles the element with a link styling (color, cursor).

Problem is, if I click that now it causes the browser to redirect. How can I update the above to not redirect the browser onClick but still run fields.push()?

Solution #1:

You should call preventDefault function from onClick event like this:

class App extends React.Component {
  onClick = (e) => {
    e.preventDefault()
    console.log('onclick..')
  }
  render() {
    return (
      <a href onClick={this.onClick} >Click me</a>
    )
  }
}

You can use something like this particular to your use case:

    const renderEmails = ({ fields }) => (
      ...
      <a href onClick={(e) => {
        e.preventDefault()
        fields.push()
      }}>Add Email</a>
      ...
    )
Respondent: Ritesh Bansal

Solution #2:

Here’s a simple solution,

  • On React class component
class App extends React.Component {
  onClick() {
    console.log('onclick..')
  }

  render() {
    return (
      <a href={void(0)} onClick={this.onClick} >Click me</a>
    )
  }
}

React is dropping the javascript:void(0) solution and the href doesn’t certainly accept the empty attribute value.

Basically what react wants us to do is to use a different component, for instance a button. We can always make a button look like a link using CSS(and thus, won’t contain href and the complexity to remove it’s behaviour). So, instead of using an anchor tag as a button, use the button element itself. Hope it makes sense.

Respondent: Vectrobyte

Solution #3:

You should consider write method clickHappens in react component instead of writing this inline. Hope it works!

<a href onClick={(e) => {e.preventDefault(); fields.push()}}> Add Email </a>
Respondent: Jan Ciołek

Solution #4:

Add e.preventDefault() to onClick and add href="#" attribute

<a href="#" onClick={(e) => { e.preventDefault(); fields.push(); }}>Add Email</a>
Respondent: Anvar Shakhmaev

Solution #5:

Using Ritesh’s answer, but without the issue of “Received true for a non-boolean attribute href”, I simply swapped out the <a> tag with a <span>

class App extends React.Component {
  onClick = (e) => {
    e.preventDefault()
    console.log('onclick..')
  }
  render() {
    return (
      <span onClick={this.onClick}>Click me</span>
    )
  }
}
Respondent: Shogo Yahagi

Solution #6:

add javscript:void(0):

<a href="https://www.py4u.net/discuss/javascript:void(0);" onClick={() => fields.push()}>Add Email</a>
Respondent: Ashu

Solution #7:

fields.push()}>Add Email

In TypeScript href="https://www.py4u.net/discuss/javascript:void(0);" throws warning, so there any other way to skip that warnings

Respondent: SatishBorkar

Solution #8:

try the following code snippet

<a href="true" ....>

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.