From 5080e220e09779158ac4aacd587c59613ca146c7 Mon Sep 17 00:00:00 2001
From: Henry Dineen <hdineen@hubspot.com>
Date: Tue, 10 Dec 2024 10:17:04 -0500
Subject: [PATCH] fix(replaceType): handle array syntax

---
 .changeset/wise-icons-wash.md                  |  5 +++++
 transforms/__tests__/deprecated-react-child.js | 16 ++++++++++++++++
 transforms/utils/replaceType.js                | 12 ++++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wise-icons-wash.md

diff --git a/.changeset/wise-icons-wash.md b/.changeset/wise-icons-wash.md
new file mode 100644
index 00000000..a94fd652
--- /dev/null
+++ b/.changeset/wise-icons-wash.md
@@ -0,0 +1,5 @@
+---
+"types-react-codemod": patch
+---
+
+Handle array syntax in replaceReactType
diff --git a/transforms/__tests__/deprecated-react-child.js b/transforms/__tests__/deprecated-react-child.js
index 355e59a7..a8dd8447 100644
--- a/transforms/__tests__/deprecated-react-child.js
+++ b/transforms/__tests__/deprecated-react-child.js
@@ -121,3 +121,19 @@ test("as type parameter", () => {
 		createAction<React.ReactElement | number | string>()"
 	`);
 });
+
+test("array syntax", () => {
+	expect(
+		applyTransform(`
+      import { ReactChild } from 'react';
+		interface Props {
+				children?: ReactChild[];
+			}
+    `),
+	).toMatchInlineSnapshot(`
+		"import { ReactElement } from 'react';
+		interface Props {
+				children?: (ReactElement | number | string)[];
+			}"
+	`);
+});
diff --git a/transforms/utils/replaceType.js b/transforms/utils/replaceType.js
index 712bcf50..f06e8994 100644
--- a/transforms/utils/replaceType.js
+++ b/transforms/utils/replaceType.js
@@ -113,8 +113,16 @@ function replaceReactType(
 		},
 	);
 	for (const typeReferences of sourceIdentifierTypeReferences) {
-		const changedIdentifiers = typeReferences.replaceWith((path) => {
-			return buildTargetTypeReference(path.value);
+		const changedIdentifiers = typeReferences.forEach((path) => {
+			const targetNode = buildTargetTypeReference(path.value);
+			if (
+				targetNode.type === "TSUnionType" &&
+				path.parentPath.value.type === "TSArrayType"
+			) {
+				path.replace(j.tsParenthesizedType(targetNode));
+			} else {
+				path.replace(targetNode);
+			}
 		});
 		if (changedIdentifiers.length > 0) {
 			hasChanges = true;