Merge pull request #187 from CodeHarborHub/dev-2

fixed issues

Author: ajay-dhangar

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

@@ -7,8 +7,6 @@ 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';
-
 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.
 
 ## What is lifting state up?
@@ -79,10 +77,6 @@ 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 />
-</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.
 
 ## Benefits of lifting state up

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

@@ -7,8 +7,6 @@ description: "Learn about the challenges of prop drilling in React applications
 tags: [courses, react-js, intermediate-level, state-management, prop-drilling, context-api, redux, state-management-libraries]
 ---
 
-import TodoApp from './TodoApp';
-
 In React applications, passing data through multiple levels of components using props can become cumbersome and lead to prop drilling. Prop drilling refers to the process of passing props down the component tree to child components that do not directly use the props, resulting in complex and hard-to-maintain code. This lesson will explore the challenges of prop drilling in React applications and discuss strategies to avoid them using context, Redux, or other state management libraries.
 
 ## What is prop drilling?
@@ -175,10 +173,6 @@ Let's look at an example of prop drilling in a React application for Todo list m
 
 In this example, the `TodoApp` component manages the state of todos and new todo text using the `useState` hook. It passes the todos array and `toggleTodo` function to the `TodoList` component as props. The `TodoList` component then maps over the todos array and renders a `TodoItem` component for each todo, passing the todo object and `toggleTodo` function as props.
 
-<BrowserWindow>
-    <TodoApp />
-</BrowserWindow>
-
 This example demonstrates prop drilling, as the `TodoApp` component passes down the todos array and `toggleTodo` function through the `TodoList` component to the `TodoItem` component. While this approach works for small applications, it can become cumbersome and hard to maintain as the application grows in complexity.
 
 ## Conclusion

courses/react-js/intermidiate-level/managing-complex-uis/ParentComponent.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/TodoApp.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) {