From 08a6d6ef9108d6b4c9550cf4954957a123353e74 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 20 Sep 2023 17:30:26 +0600
Subject: [PATCH] wip: add list question

---
 .../react/content/render-list.md                | 17 +++++++++++++++++
 src/data/question-groups/react/react.md         |  5 +++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/data/question-groups/react/content/render-list.md

diff --git a/src/data/question-groups/react/content/render-list.md b/src/data/question-groups/react/content/render-list.md
new file mode 100644
index 000000000..f0241b6a9
--- /dev/null
+++ b/src/data/question-groups/react/content/render-list.md
@@ -0,0 +1,17 @@
+In React, you can render a list by using the JavaScript `map` function to iterate over an array of items and return a JSX element for each item. It's important to provide a unique `key` prop to each element in the list for React's diffing algorithm to function efficiently during re-renders. Here's a basic example:
+
+```javascript
+const items = ['Apple', 'Banana', 'Cherry'];
+
+function FruitList() {
+  return (
+    <ul>
+      {items.map((fruit, index) => (
+        <li key={index}>{fruit}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+> Note: While using the index as a key can work in some cases, it's generally not recommended for dynamic lists where items can be added, removed, or reordered.
diff --git a/src/data/question-groups/react/react.md b/src/data/question-groups/react/react.md
index 4c96e596d..c94706ca1 100644
--- a/src/data/question-groups/react/react.md
+++ b/src/data/question-groups/react/react.md
@@ -307,4 +307,9 @@ questions:
     topics:
       - 'Core'
       - 'Beginner'
+  - question: How to render a list in React?
+    answer: render-list.md
+    topics:
+      - 'Core'
+      - 'Beginner'
 ---