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()
?
To make an anchor tag refer to nothing, use “javascript: void(0)”. The following link does nothing because the expression "0" has no effect in JavaScript. Here the expression "0" is evaluated, but it is not loaded back into the current document.
To set an onClick listener on a link in React: Set the onClick prop on the link. The function you pass to the prop will get called every time the link is clicked.
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> ... )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With