From 8cd8e05f9e96cf2c48676ecccc030edb3d6674f4 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Tue, 19 Mar 2024 09:11:54 -0600
Subject: [PATCH] react node is better

---
 exercises/02.composition/01.problem/index.tsx  | 8 ++++----
 exercises/02.composition/01.solution/index.tsx | 8 ++++----
 exercises/02.composition/README.mdx            | 4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/exercises/02.composition/01.problem/index.tsx b/exercises/02.composition/01.problem/index.tsx
index 1e23b6e3..ba587510 100644
--- a/exercises/02.composition/01.problem/index.tsx
+++ b/exercises/02.composition/01.problem/index.tsx
@@ -14,13 +14,13 @@ function App() {
 			style={{ ['--accent-color' as any]: selectedSport?.color ?? 'black' }}
 		>
 			{/*
-				🐨 make Nav accept a ReactElement prop called "avatar"
+				🐨 make Nav accept a ReactNode prop called "avatar"
 				instead of a User prop called "user"
 			*/}
 			<Nav user={user} />
 			<div className="spacer" data-size="lg" />
 			{/*
-				🐨 make Main accept ReactElement props called "sidebar" and "content"
+				🐨 make Main accept ReactNode props called "sidebar" and "content"
 				instead of the props it accepts right now.
 			*/}
 			<Main
@@ -38,7 +38,7 @@ function App() {
 	)
 }
 
-// 🐨 this should accept an avatar prop that's a ReactElement
+// 🐨 this should accept an avatar prop that's a ReactNode
 function Nav({ user }: { user: User }) {
 	return (
 		<nav>
@@ -81,7 +81,7 @@ function Main({
 }
 
 function List({
-	// 🐨 make this accept an array of ReactElements called "listItems"
+	// 🐨 make this accept an array of ReactNodes called "listItems"
 	// and remove the existing props
 	sportList,
 	setSelectedSport,
diff --git a/exercises/02.composition/01.solution/index.tsx b/exercises/02.composition/01.solution/index.tsx
index d5b2c71c..66066c13 100644
--- a/exercises/02.composition/01.solution/index.tsx
+++ b/exercises/02.composition/01.solution/index.tsx
@@ -38,7 +38,7 @@ function App() {
 	)
 }
 
-function Nav({ avatar }: { avatar: React.ReactElement }) {
+function Nav({ avatar }: { avatar: React.ReactNode }) {
 	return (
 		<nav>
 			<ul>
@@ -63,8 +63,8 @@ function Main({
 	sidebar,
 	content,
 }: {
-	sidebar: React.ReactElement
-	content: React.ReactElement
+	sidebar: React.ReactNode
+	content: React.ReactNode
 }) {
 	return (
 		<main>
@@ -74,7 +74,7 @@ function Main({
 	)
 }
 
-function List({ listItems }: { listItems: Array<React.ReactElement> }) {
+function List({ listItems }: { listItems: Array<React.ReactNode> }) {
 	return (
 		<div className="sport-list">
 			<ul>{listItems}</ul>
diff --git a/exercises/02.composition/README.mdx b/exercises/02.composition/README.mdx
index 853f9577..cbe3724f 100644
--- a/exercises/02.composition/README.mdx
+++ b/exercises/02.composition/README.mdx
@@ -69,7 +69,7 @@ function App() {
 	)
 }
 
-function Child({ grandChild }: { grandChild: React.ReactElement }) {
+function Child({ grandChild }: { grandChild: React.ReactNode }) {
 	return (
 		<div>
 			<strong>
@@ -81,7 +81,7 @@ function Child({ grandChild }: { grandChild: React.ReactElement }) {
 	)
 }
 
-function GrandChild({ button }: { button: React.ReactElement }) {
+function GrandChild({ button }: { button: React.ReactNode }) {
 	return (
 		<div>
 			<small>I am a grand child and I just pass things off to a button</small>