CODEWITHSUNDEEP
javascriptreactjseslint
dagda1
dagda1

Reputation: 28830

What to set href to on a react component with an onclick

I have an anchor element set like this;

<a href="#" onClick={this.handleNewFormToggle}>
  <i className="ml-20 glyphicon glyphicon-plus"/>
</a>

But this fails eslint with jsx-ally/href-no-hash.

javascript:void() is out for xss reasons and no href fails with:

jsx-ally/no-static-element-interactions

so what should I set it to?

Upvotes: 2

Views: 3267

Answers (1)

Harkat
Harkat

Reputation: 162

If your linting complains, you could leave the href="#" in the a tag. Then in the handleNewFormToggle you can prevent the default action of the click event:

handeNewFormToggle(event) {
   event.preventDefault();
}

Alternatively, change your linting rules to allow you to remove the href tag :)

Upvotes: 1

Related Questions