jsx-eslint/eslint-plugin-react

[Enhancement]: jsx-handler-names reports error with inline ternary conditional callbacks

Open

#3,855 opened on Nov 20, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (2,797 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (8,630 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

Conditionally applying callback functions with inline ternary statements violates the rule, even when the condition will satisfy the rule.

<MyComponent
  onClick={isClickDisabled ? undefined : handleClick}
/>

ESLint: Handler function for onClickNext prop key must be a camelCase name beginning with 'handle' only(react/ jsx-handler-names)

Expected Behavior

If there is an inline ternary condition and it returns the properly named function, it should pass.

eslint-plugin-react version

v7.37.2

eslint version

v8.57.0

node version

v20.17.0

Contributor guide

Research direction
Examine the implementation of the `jsx handler names` rule in `lib/rules/jsx handler names.js`. Look for where the prop value is checked for a handler pattern. The rule currently fails on ternary expressions; research how to properly evaluate ternary nodes (ConditionalExpression) to check if both branches are valid handlers or if one is undefined/valid. Check how other rules handle similar patterns, e.g., `jsx no target blank`. After understanding, propose a fix that allows the ternary expression if it returns a properly named handler or undefined.
Tech stack
javascriptreact
Domain
frontendtooling
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptESLint plugin developmentReact event handlers
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65