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

@@ -297,7 +297,7 @@ impl Rule for JsxHandlerNames {
             }
             JSXExpression::StaticMemberExpression(member_expr) => {
                 let (name, span, is_props_handler) =
-                    get_event_handler_name_from_static_member_expression(member_expr, ctx);
+                    get_event_handler_name_from_static_member_expression(member_expr, ctx, 0);
                 (Some(name), span, is_props_handler)
             }
             _ => {
@@ -378,19 +378,24 @@ fn is_member_expression_callee(arrow_function: &ArrowFunctionExpression<'_>) ->
 fn get_event_handler_name_from_static_member_expression(
     member_expr: &StaticMemberExpression,
     ctx: &LintContext,
+    depth: usize,
 ) -> (CompactStr, Span, bool) {
     let name = member_expr.property.name.as_str();
     let span = member_expr.property.span;
     match &member_expr.object {
-        Expression::ThisExpression(_) => (name.into(), span, false),
+        Expression::ThisExpression(_) => {
+            let is_props_property = depth == 1 && name == "props"; // this.props.*
+            (name.into(), span, is_props_property)
+        }
         Expression::Identifier(ident) => {
             let obj_name = ident.name.as_str();
-            (name.into(), span, obj_name == "props")
+            let is_props_property = depth == 0 && obj_name == "props"; // props.*
+            (name.into(), span, is_props_property)
         }
         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 (_, _, is_props_property) =
+                get_event_handler_name_from_static_member_expression(expr, ctx, depth + 1);
+            (name.into(), span, is_props_property)
         }
         _ => (ctx.source_range(member_expr.span).into(), member_expr.span, false),
     }
@@ -471,7 +476,7 @@ fn get_event_handler_name_from_arrow_function<'a>(
     match &call_expr.callee {
         Expression::Identifier(ident) => Some((ident.name.as_str().into(), ident.span, false)),
         Expression::StaticMemberExpression(member_expr) => {
-            Some(get_event_handler_name_from_static_member_expression(member_expr, ctx))
+            Some(get_event_handler_name_from_static_member_expression(member_expr, ctx, 0))
         }
         _ => None,
     }
@@ -622,6 +627,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} />