Chap03 -> Creating function-based component -> Function props (aka how to use render prop)

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>
 );

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>