Chap03 -> Creating function-based component -> Children props

QandA/frontend/src/HomePage.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
+import { PageTitle } from './PageTitle';
+import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions } from './QuestionsData';
 
 export const HomePage = () => (
+  <Page>
     <div>
-    <div>
+      <PageTitle>Unanswered Questions</PageTitle>
-      <h2>Unanswered Questions</h2>
       <button>Ask a question</button>
     </div>
     <QuestionList data={getUnansweredQuestions()} />
-  </div>
+  </Page>
 );

QandA/frontend/src/Page.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PageTitle } from './PageTitle';
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const Page = ({ title, children }: Props) => (
+  <div>
+    {title && <PageTitle>{title}</PageTitle>}
+    {children}
+    {/* Component nested within Page component will be rendere here */}
+  </div>
+);

QandA/frontend/src/PageTitle.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+interface Props {
+  children: React.ReactNode;
+}
+export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;