From 3414f207986a24d326e53d16eac0db178e1d9d5d Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 30 Mar 2022 16:18:22 +1100
Subject: [PATCH] Chap05 -> Using route parameters -> Creating an AnswerList
 component

---
 QandA/frontend/src/Answer.tsx       | 2 +-
 QandA/frontend/src/AnswerList.tsx   | 6 +++---
 QandA/frontend/src/QuestionPage.tsx | 2 ++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/QandA/frontend/src/Answer.tsx b/QandA/frontend/src/Answer.tsx
index 49a10b4..66a4b6f 100644
--- a/QandA/frontend/src/Answer.tsx
+++ b/QandA/frontend/src/Answer.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export const Answer = ({ data }: Props) => (
   <div
-    css={`
+    css={css`
       padding: 10px 0px;
     `}
   >
diff --git a/QandA/frontend/src/AnswerList.tsx b/QandA/frontend/src/AnswerList.tsx
index a77ad69..8e9a1fb 100644
--- a/QandA/frontend/src/AnswerList.tsx
+++ b/QandA/frontend/src/AnswerList.tsx
@@ -9,7 +9,7 @@ interface Props {
   data: AnswerData[];
 }
 
-export const AnswerList = ({ data }: Props) => {
+export const AnswerList = ({ data }: Props) => (
   <ul
     css={css`
       list-style: none;
@@ -27,5 +27,5 @@ export const AnswerList = ({ data }: Props) => {
         <Answer data={answer} />
       </li>
     ))}
-  </ul>;
-};
+  </ul>
+);
diff --git a/QandA/frontend/src/QuestionPage.tsx b/QandA/frontend/src/QuestionPage.tsx
index 0f94f46..90415f5 100644
--- a/QandA/frontend/src/QuestionPage.tsx
+++ b/QandA/frontend/src/QuestionPage.tsx
@@ -7,6 +7,7 @@ import { useParams } from 'react-router-dom';
 
 import { Page } from './Page';
 import { QuestionData, getQuestion } from './QuestionsData';
+import { AnswerList } from './AnswerList';
 
 export const QuestionPage = () => {
   const [question, setQuestion] = React.useState<QuestionData | null>(null);
@@ -61,6 +62,7 @@ export const QuestionPage = () => {
                 question.userName
               } on ${question.created.toLocaleDateString()} ${question.created.toLocaleTimeString()}`}
             </div>
+            <AnswerList data={question.answers} />
           </React.Fragment>
         )}
       </div>