fix(useJsxKeyInIterables): unwrap parenthesized expression (#2016)

crates/biome_js_analyze/src/semantic_analyzers/nursery/use_jsx_key_in_iterable.rs

@@ -206,7 +206,14 @@ fn handle_iterators(
             let body = callback.body().ok()?;
             match body {
                 AnyJsFunctionBody::AnyJsExpression(expr) => {
-                    handle_potential_react_component(&expr, model, is_inside_jsx)
+                    // unwrap parenthesized expression
+                    let mut inner_expr = expr;
+                    while let AnyJsExpression::JsParenthesizedExpression(parenthesized_expr) =
+                        inner_expr
+                    {
+                        inner_expr = parenthesized_expr.expression().ok()?;
+                    }
+                    handle_potential_react_component(&inner_expr, model, is_inside_jsx)
                         .map(|state| vec![state])
                 }
                 AnyJsFunctionBody::JsFunctionBody(body) => {

crates/biome_js_analyze/tests/specs/nursery/useJsxKeyInIterable/invalid.jsx

@@ -35,3 +35,5 @@ React.Children.map(c => React.cloneElement(c));
 (<h1>{data.map(c => <h1></h1>)}</h1>)
 
 (<h1>{data.map(c => xyz)}</h1>)
+
+(<h1>{data.map(c => (<h1></h1>))}</h1>)

crates/biome_js_analyze/tests/specs/nursery/useJsxKeyInIterable/invalid.jsx.snap

@@ -42,6 +42,7 @@ React.Children.map(c => React.cloneElement(c));
 
 (<h1>{data.map(c => xyz)}</h1>)
 
+(<h1>{data.map(c => (<h1></h1>))}</h1>)
 ```
 
 # Diagnostics
@@ -586,10 +587,28 @@ invalid.jsx:37:21 lint/nursery/useJsxKeyInIterable ━━━━━━━━━
   > 37 │ (<h1>{data.map(c => xyz)}</h1>)
        │                     ^^^
     38 │ 
+    39 │ (<h1>{data.map(c => (<h1></h1>))}</h1>)
   
   i Either return a JSX expression, or suppress this instance if you determine it is safe.
   
   i Check the React documentation for why a key prop is required. 
   
 
 ```
+
+```
+invalid.jsx:39:22 lint/nursery/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Missing key property for this element in iterable.
+  
+    37 │ (<h1>{data.map(c => xyz)}</h1>)
+    38 │ 
+  > 39 │ (<h1>{data.map(c => (<h1></h1>))}</h1>)
+       │                      ^^^^
+  
+  i The order of the items may change, and having a key can help React identify which item was moved.
+  
+  i Check the React documentation. 
+  
+
+```

crates/biome_js_analyze/tests/specs/nursery/useJsxKeyInIterable/valid.jsx

@@ -42,3 +42,5 @@ React.Children.map(c => React.cloneElement(c, {key: c}));
 (<h1>{[<h1 key={1}></h1>, <h1 key={2}></h1>, <h1 key={3}></h1>]}</h1>)
 
 (<h1>{data.map(c => <h1 key={c}></h1>)}</h1>)
+
+(<h1>{data.map(c => (<h1 key={c}></h1>))}</h1>)

crates/biome_js_analyze/tests/specs/nursery/useJsxKeyInIterable/valid.jsx.snap

@@ -49,4 +49,5 @@ React.Children.map(c => React.cloneElement(c, {key: c}));
 
 (<h1>{data.map(c => <h1 key={c}></h1>)}</h1>)
 
+(<h1>{data.map(c => (<h1 key={c}></h1>))}</h1>)
 ```