[#26] SurveyList to only display a single Survey depending on position

src/components/Survey/index.tsx

@@ -8,8 +8,8 @@ function Survey({ title, description, coverImageUrl }: SurveyProps) {
   return (
     <>
       <img src={coverImageUrl} alt="cover" />
-      <p> {title}</p>
-      <p> {description}</p>
+      <p className="text-white"> {title}</p>
+      <p className="text-white"> {description}</p>
     </>
   );
 }

src/components/SurveyList/index.tsx

@@ -1,19 +1,21 @@
+import { useState } from 'react';
+
+import Button from 'components/Button';
 import SurveyComponent from 'components/Survey';
 import { Survey } from 'types/Survey';
 
 type SurveyListProps = { surveys: Survey[] };
 
 function SurveyList({ surveys }: SurveyListProps) {
+  const [index, setIndex] = useState(0);
+
   return (
-    <div>
-      {surveys.map((survey) => {
-        return (
-          <li key={survey.id}>
-            <SurveyComponent {...survey} />
-          </li>
-        );
-      })}
-    </div>
+    <>
+      <SurveyComponent {...surveys[index]} />
+
+      {/* TODO: For testing */}
+      <Button type="button" onButtonClick={() => setIndex(index + 1)} text="Next" />
+    </>
   );
 }
 

src/screens/Home/index.tsx

@@ -45,7 +45,11 @@ const HomeScreen = (): JSX.Element => {
         Today - Monday, June 15
       </div>
 
-      {surveys.length > 0 && <SurveyList surveys={surveys} />}
+      {surveys.length > 0 && (
+        <section>
+          <SurveyList surveys={surveys} />
+        </section>
+      )}
     </>
   );
 };