react node is better

epicweb-dev · Mar 19, 2024 · 8cd8e05 · 8cd8e05
1 parent 4462c35
commit 8cd8e05
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>