return false should not be used in a React event handler

• REACT_BAD_EVENT_HANDLER_RETURN_FALSE
• Error
• Medium
• react

This rule applies when the return value of a React event handler is false.

Unlike vanilla HTML or jQuery, returning false from an event handler does not prevent event propagation or default behavior in React. Instead, stopPropagation() or preventDefault() should be explicitly called on the React event object received as a parameter.

Noncompliant Code Example

import React from 'react';

export class Hello extends React.Component {
    render() {
        return (
            <a href="http://foo.com" onClick={event => false}> {/* REACT_BAD_EVENT_HANDLER_RETURN_FALSE alarm */}
                foo.com
            </a>
        );
    }
}

Compliant Code Example

import React from 'react';

export class Hello extends React.Component {
    render() {
        return (
            <a href="http://foo.com" onClick={event => event.preventDefault()}>
                foo.com
            </a>
        );
    }
}

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• SyntheticEvent