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

Question

I have the following html element:

 fields.push()}>Add Email

I need the href attribute so bootstra

Answer 1

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

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

Answer 2

fields.push()}>Add Email

In TypeScript href="javascript:void(0);" throws warning, so there any other way to skip that warnings

Answer 3

try the following code snippet

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

Answer 4

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>

Answer 5

add javscript:void(0):

<a href="javascript:void(0);" onClick={() => fields.push()}>Add Email</a>

Answer 6

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>
      ...
    )