Chap03 -> Creating function-based components -> Creating HomePage child components

QandA/frontend/src/HomePage.tsx

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

QandA/frontend/src/Question.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { QuestionData } from './QuestionsData';
+
+interface Props {
+  data: QuestionData;
+}
+
+export const Question = ({ data }: Props) => (
+  <div>
+    <div>{data.title}</div>
+    <div>
+      {`Ask by ${
+        data.userName
+      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
+    </div>
+  </div>
+);

QandA/frontend/src/QuestionList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Question } from './Question';
 import { QuestionData } from './QuestionsData';
 
 interface Props {
@@ -8,7 +9,9 @@ interface Props {
 export const QuestionList = ({ data }: Props) => (
   <ul>
     {data.map((question) => (
-      <li key={question.questionId}></li>
+      <li key={question.questionId}>
+        <Question data={question} />
+      </li>
     ))}
   </ul>
 );