From ce00bab691485e1848a9fbc72c85e2f960971ffa Mon Sep 17 00:00:00 2001
From: Baslael Workineh Ayele
 <64444969+BaslaelWorkineh@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:09:18 +0300
Subject: [PATCH 1/2] Update README.md

---
 README.md | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/README.md b/README.md
index cda0ef1..d7630af 100644
--- a/README.md
+++ b/README.md
@@ -2362,3 +2362,74 @@ const TodoList = ({ todos }) => {
 - React uses these keys to track changes and apply updates efficiently.
 
 </details>
+
+<summary>
+<h3>76. Scenario Based - Async Data Fetch and Rendering</h3>
+Create a React component that fetches data from a given API endpoint and renders it as a list.
+
+The API endpoint returns an array of objects, each containing an id and a name. However, there is a 2-second delay before the API responds.
+
+Implement the React component to fetch the data from the API and display it as a list.
+
+API Endpoint: https://jsonplaceholder.typicode.com/users
+
+</summary>
+
+
+**Answer:**
+
+```jsx
+
+import React, { useState, useEffect } from "react";
+
+function DataList() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          "https://jsonplaceholder.typicode.com/users"
+        );
+        const json = await response.json();
+        // Simulate a 2-second delay before setting the data
+        setTimeout(() => {
+          setData(json);
+          setLoading(false);
+        }, 2000);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <h2>Data List</h2>
+      {loading ? (
+        <p>Loading...</p>
+      ) : (
+        <ul>
+          {data.map((item) => (
+            <li key={item.id}>{item.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default DataList;
+```
+**Explanation:**
+
+This question tests the candidate's understanding of asynchronous data fetching and rendering in React.
+The solution uses useState to manage state variables for the fetched data and loading status.
+useEffect hook is utilized to perform the data fetching operation when the component mounts.
+The API fetch operation is asynchronous, and a loading message is displayed while waiting for the response.
+Upon receiving the API response, the data is set into the state after a 2-second delay (simulated using setTimeout).
+Finally, the fetched data is rendered as a list once the loading is complete.

From ece87c6d807f658e13c33f89dce5fbcc07024b79 Mon Sep 17 00:00:00 2001
From: Baslael Workineh Ayele
 <64444969+BaslaelWorkineh@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:11:02 +0300
Subject: [PATCH 2/2] Update README.md

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d7630af..5e99402 100644
--- a/README.md
+++ b/README.md
@@ -2363,6 +2363,8 @@ const TodoList = ({ todos }) => {
 
 </details>
 
+<details>
+    
 <summary>
 <h3>76. Scenario Based - Async Data Fetch and Rendering</h3>
 Create a React component that fetches data from a given API endpoint and renders it as a list.
@@ -2375,7 +2377,6 @@ API Endpoint: https://jsonplaceholder.typicode.com/users
 
 </summary>
 
-
 **Answer:**
 
 ```jsx
@@ -2433,3 +2434,5 @@ useEffect hook is utilized to perform the data fetching operation when the compo
 The API fetch operation is asynchronous, and a loading message is displayed while waiting for the response.
 Upon receiving the API response, the data is set into the state after a 2-second delay (simulated using setTimeout).
 Finally, the fetched data is rendered as a list once the loading is complete.
+
+</details>