fix: noUndeclaredVariables no longer errors on this in JSX tags (#…

…2647)

Co-authored-by: printfn <[email protected]>

CHANGELOG.md

@@ -144,6 +144,20 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
   Contributed by @Conaclos
 
+- [noUndeclaredVariables](https://biomejs.dev/linter/rules/no-undeclared-variables/) no longer errors on `this` in JSX tags ([#2636](https://github.com/biomejs/biome/issues/2636)).
+
+  ```jsx
+  import { Component } from 'react';
+
+  export class MyComponent extends Component {
+    render() {
+      return <this.foo />;
+    }
+  }
+  ```
+
+  Contributed by @printfn
+
 ### Parser
 
 ## 1.7.1 (2024-04-22)

crates/biome_js_analyze/tests/specs/correctness/noUndeclaredVariables/thisInJsx.jsx

@@ -0,0 +1,7 @@
+import { Component } from 'react';
+
+export class MyComponent extends Component {
+  render() {
+    return <this.foo />;
+  }
+}

crates/biome_js_analyze/tests/specs/correctness/noUndeclaredVariables/thisInJsx.jsx.snap

@@ -0,0 +1,15 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+assertion_line: 83
+expression: thisInJsx.jsx
+---
+# Input
+```jsx
+import { Component } from 'react';
+
+export class MyComponent extends Component {
+  render() {
+    return <this.foo />;
+  }
+}
+```

crates/biome_js_parser/src/syntax/jsx/mod.rs

@@ -409,7 +409,9 @@ fn parse_jsx_expression_child(p: &mut JsParser) -> ParsedSyntax {
 fn parse_jsx_any_element_name(p: &mut JsParser) -> ParsedSyntax {
     let name = parse_jsx_name_or_namespace(p);
     name.map(|mut name| {
-        if name.kind(p) == JSX_NAME && (p.at(T![.]) || !is_intrinsic_element(name.text(p))) {
+        if name.kind(p) == JSX_NAME && name.text(p) == "this" {
+            name.change_kind(p, JS_THIS_EXPRESSION)
+        } else if name.kind(p) == JSX_NAME && (p.at(T![.]) || !is_intrinsic_element(name.text(p))) {
             name.change_kind(p, JSX_REFERENCE_IDENTIFIER)
         } else if name.kind(p) == JSX_NAMESPACE_NAME && p.at(T![.]) {
             let error = p.err_builder(
@@ -434,7 +436,7 @@ fn parse_jsx_any_element_name(p: &mut JsParser) -> ParsedSyntax {
 /// Tests if this is an intrinsic element name. Intrinsic elements are such elements
 /// that are built in, for example HTML elements. This implementation uses React's semantic
 /// and assumes that anything starting with a lower case character is an intrinsic element, and
-/// that custom components start with an uper case character.
+/// that custom components start with an upper case character.
 ///
 /// Resources: [TypeScript's documentation on intrinsic elements](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements)
 fn is_intrinsic_element(element_name: &str) -> bool {