Chap05 -> Using route parameters -> Creating an AnswerList component

QandA/frontend/src/Answer.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export const Answer = ({ data }: Props) => (
   <div
-    css={`
+    css={css`
       padding: 10px 0px;
     `}
   >

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

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>