allow the props name pattern for the event handler name only when the direct parent's name is "props"

Author: takuji

crates/oxc_linter/src/rules/react/jsx_handler_names.rs

@@ -388,9 +388,8 @@ fn get_event_handler_name_from_static_member_expression(
             (name.into(), span, obj_name == "props")
         }
         Expression::StaticMemberExpression(expr) => {
-            let (obj_name, _obj_span, is_props) =
-                get_event_handler_name_from_static_member_expression(expr, ctx);
-            (name.into(), span, !is_props && obj_name == "props")
+            let (obj_name, _, _) = get_event_handler_name_from_static_member_expression(expr, ctx);
+            (name.into(), span, obj_name == "props")
         }
         _ => (ctx.source_range(member_expr.span).into(), member_expr.span, false),
     }
@@ -622,6 +621,8 @@ fn test() {
         ("<TestComponent onChange={this.handl3Change} />", None),
         ("<TestComponent onChange={this.handle4change} />", None),
         ("<TestComponent onChange={this.props.doSomethingOnChange} />", None),
+        ("<TestComponent onChange={this.props.obj.onChange} />", None),
+        ("<TestComponent onChange={props.obj.onChange} />", None),
         (
             "<TestComponent onChange={takeCareOfChange} />",
             Some(serde_json::json!([{ "checkLocalVariables": true }])),

crates/oxc_linter/src/snapshots/react_jsx_handler_names.snap

@@ -50,6 +50,20 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: Handler function for onChange prop key must be a camelCase name beginning with 'handle' only
 
+  ⚠ eslint-plugin-react(jsx-handler-names): Invalid handler name: onChange
+   ╭─[jsx_handler_names.tsx:1:41]
+ 1 │ <TestComponent onChange={this.props.obj.onChange} />
+   ·                                         ────────
+   ╰────
+  help: Handler function for onChange prop key must be a camelCase name beginning with 'handle' only
+
+  ⚠ eslint-plugin-react(jsx-handler-names): Invalid handler name: onChange
+   ╭─[jsx_handler_names.tsx:1:36]
+ 1 │ <TestComponent onChange={props.obj.onChange} />
+   ·                                    ────────
+   ╰────
+  help: Handler function for onChange prop key must be a camelCase name beginning with 'handle' only
+
   ⚠ eslint-plugin-react(jsx-handler-names): Invalid handler name: takeCareOfChange
    ╭─[jsx_handler_names.tsx:1:26]
  1 │ <TestComponent onChange={takeCareOfChange} />