From 2ea9deeba627dcd479f010b3cfd4e3f8b5a99054 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 30 Mar 2022 14:58:26 +1100
Subject: [PATCH] Chap05 -> Using route parameters -> Creating an AnswerList
 component -> 1 & 2 & 3: created AnswerList.tsx

---
 QandA/frontend/src/AnswerList.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 QandA/frontend/src/AnswerList.tsx

diff --git a/QandA/frontend/src/AnswerList.tsx b/QandA/frontend/src/AnswerList.tsx
new file mode 100644
index 0000000..a77ad69
--- /dev/null
+++ b/QandA/frontend/src/AnswerList.tsx
@@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React from 'react';
+import { AnswerData } from './QuestionsData';
+import { Answer } from './Answer';
+import { gray5 } from './Styles';
+
+interface Props {
+  data: AnswerData[];
+}
+
+export const AnswerList = ({ data }: Props) => {
+  <ul
+    css={css`
+      list-style: none;
+      margin: 10px 0 0 0;
+      padding: 0;
+    `}
+  >
+    {data.map((answer) => (
+      <li
+        css={css`
+          border-top: 1px solid ${gray5};
+        `}
+        key={answer.answertId}
+      >
+        <Answer data={answer} />
+      </li>
+    ))}
+  </ul>;
+};