From 072b7dcf88c0e5f5d37f6ebde0d9857f0c400a8f Mon Sep 17 00:00:00 2001
From: Yiqing Zhu <793831308@qq.com>
Date: Sat, 26 Mar 2022 14:24:47 +1100
Subject: [PATCH] Chap03 -> Creating function-based component -> Function props
 (aka how to use render prop)

---
 QandA/frontend/src/HomePage.tsx     | 5 ++++-
 QandA/frontend/src/QuestionList.tsx | 5 +++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/QandA/frontend/src/HomePage.tsx b/QandA/frontend/src/HomePage.tsx
index 4288b57..6498c5c 100644
--- a/QandA/frontend/src/HomePage.tsx
+++ b/QandA/frontend/src/HomePage.tsx
@@ -11,6 +11,9 @@ export const HomePage = () => (
       <button>Ask a question</button>{' '}
       {/* This button component is passed as children of Page */}
     </div>
-    <QuestionList data={getUnansweredQuestions()} />
+    <QuestionList
+      data={getUnansweredQuestions()}
+      renderItem={(question) => <div>{question.title}</div>}
+    />
   </Page>
 );
diff --git a/QandA/frontend/src/QuestionList.tsx b/QandA/frontend/src/QuestionList.tsx
index 636d484..d9f85fe 100644
--- a/QandA/frontend/src/QuestionList.tsx
+++ b/QandA/frontend/src/QuestionList.tsx
@@ -4,13 +4,14 @@ import { QuestionData } from './QuestionsData';
 
 interface Props {
   data: QuestionData[];
+  renderItem?: (item: QuestionData) => JSX.Element;
 }
 
-export const QuestionList = ({ data }: Props) => (
+export const QuestionList = ({ data, renderItem }: Props) => (
   <ul>
     {data.map((question) => (
       <li key={question.questionId}>
-        <Question data={question} />
+        {renderItem ? renderItem(question) : <Question data={question} />}
       </li>
     ))}
   </ul>