Eslint / eslint-plugin-react: <form action = "Javascript: void (0)"> - no- script -url error

Question

I have a component with the form:

<form action = "javascript: void (0)" onSubmit = {this.join}>

Eslint complains:

Script error URL is a form of eval no- script -url

Note. I also use "eslint-plugin-react"

How can I loosen this rule or what will be an alternative to the javascript void function?

Answer 1

I only had this problem, and then I saw this template in the official Redux docs, and that made a lot of sense to me:

<a href="" onClick={e => { e.preventDefault() onClick() }} > {children} </a> 

A source

This is what I will do from now on.

Answer 2

I disabled it:

 "no-script-url": 0 

Answer 3

It's actually wrong to turn it off because javascript: is like eval for the browser, and eval is evil, as people know.

Alternatively, you do not need to put an action prop. preventDefault in your join method. For instance:

 function join(e){ e.preventDefault(); //... } 

Answer 4

Using javascript: URLs is seen by some as a form of eval. Code passed to javascript: URL must be parsed and evaluated by the browser in the same way that eval is handled.

Examples of incorrect code for this rule:

 location.href = "javascript:void(0)"; 

• JSHint . This rule complies with the JSHint scripturl rule.

Further reading of this link

What's up with script-regulated URLs