fix(lint/useJsxKeyInIterable): handle ternaries properly (#2701)

crates/biome_js_analyze/src/lint/correctness/use_jsx_key_in_iterable.rs

@@ -206,6 +206,19 @@ fn handle_potential_react_component(
     let node = unwrap_parenthesis(node)?;
 
     if is_inside_jsx {
+        if let AnyJsExpression::JsConditionalExpression(node) = node {
+            let consequent =
+                handle_potential_react_component(node.consequent().ok()?, model, is_inside_jsx);
+            let alternate =
+                handle_potential_react_component(node.alternate().ok()?, model, is_inside_jsx);
+
+            return match (consequent, alternate) {
+                (Some(consequent), Some(alternate)) => Some([consequent, alternate].concat()),
+                (Some(consequent), None) => Some(consequent),
+                (None, Some(alternate)) => Some(alternate),
+                (None, None) => None,
+            };
+        }
         if let Some(node) = ReactComponentExpression::cast_ref(node.syntax()) {
             let range = handle_react_component(node, model)?;
             Some(vec![range])

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

@@ -520,6 +520,25 @@ invalid.jsx:33:8 lint/correctness/useJsxKeyInIterable ━━━━━━━━
   i Check the React documentation. 
   
 
+```
+
+```
+invalid.jsx:33:29 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Missing key property for this element in iterable.
+  
+    31 │ (<h1>{[<h1></h1>, <h1></h1>, <h1></h1>]}</h1>)
+    32 │ 
+  > 33 │ (<h1>{[<h1></h1>, xyz, abc? <h2></h2>: bcd]}</h1>)
+       │                             ^^^^
+    34 │ 
+    35 │ (<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/correctness/useJsxKeyInIterable/valid.jsx

@@ -52,3 +52,5 @@ React.Children.map(c => React.cloneElement(c, {key: c}));
 <>{data.reduce((a, b) => Math.max(a, b), 0)}</>
 
 <>{data.reduce((a, b) => a > b ? a : b, 0)}</>
+
+<>{data.map(a => a > 4 ? <h1 key={a}>{a}</h1> : <h2 key={a}>{a}</h2>)}</>

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

@@ -59,4 +59,6 @@ React.Children.map(c => React.cloneElement(c, {key: c}));
 
 <>{data.reduce((a, b) => a > b ? a : b, 0)}</>
 
+<>{data.map(a => a > 4 ? <h1 key={a}>{a}</h1> : <h2 key={a}>{a}</h2>)}</>
+
 ```