fixed issues

Author: ajay-dhangar

courses/react-js/intermidiate-level/managing-complex-uis/App.js

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+/**
+ * @module Counter
+ * @param {number} count - The count of the counter
+ * @param {function} setCount - The function to set the count
+ * @returns {JSX.Element} - The JSX code for the Counter component
+ */
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Count: {count}</h1>
+      <div>
+        <h2>Parent Component</h2>
+        <p>Count: {count}</p>
+        <div>
+          <h3>Child Component</h3>
+          <button
+            onClick={(function () {
+              setCount(count + 1);
+            })()}
+          >
+            Increment Count
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Counter;

courses/react-js/intermidiate-level/managing-complex-uis/ChildComponent.js

@@ -7,7 +7,7 @@ description: "Learn how to lift state up in React to manage shared state across
 tags: [courses, react-js, intermediate-level, state-management, lifting-state-up]
 ---
 
-import App from './App';
+import Counter from './Counter';
 
 In React applications, managing shared state between components can be challenging, especially when components are not directly related in the component tree. Lifting state up is a common pattern in React that allows you to manage shared state in a parent component and pass it down to child components as props. This lesson will introduce you to the concept of lifting state up and show you how to use it to share state between components in your React applications.
 
@@ -80,7 +80,7 @@ Here's an example of lifting state up in a React application:
 In this example, we have an `App` component that manages the `count` state using the `useState` hook. The `App` component passes the `count` state and an `incrementCount` function down to the `ParentComponent` as props. The `ParentComponent` then passes the `incrementCount` function down to the `ChildComponent` as a prop. When the `ChildComponent` button is clicked, it calls the `incrementCount` function to update the `count` state in the `App` component.
 
 <BrowserWindow>
-    <App />
+    <Counter />
 </BrowserWindow>
 
 By lifting the `count` state up to the `App` component, we can share the state between the `ParentComponent` and `ChildComponent` without having to pass the state through multiple levels of components. This pattern helps keep the application's data in sync and makes it easier to manage shared state across components.

courses/react-js/intermidiate-level/managing-complex-uis/Counter.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import axios from 'axios';
 
 const DataFetcher = () => {

courses/react-js/intermidiate-level/managing-complex-uis/ParentComponent.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 function FetchDataComponent() {
   const [userData, setUserData] = useState(null);
@@ -8,6 +8,9 @@ function FetchDataComponent() {
     async function fetchData() {
       try {
         const response = await fetch('https://api.github.com/users/Ajay-Dhangar');
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
         const data = await response.json();
         setUserData(data);
       } catch (error) {