Skip to content

fixed issues #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions courses/react-js/intermidiate-level/managing-complex-uis/App.js

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down Expand 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/react/back-end-integration/DataFetcher.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import axios from 'axios';

const DataFetcher = () => {
Expand Down
5 changes: 4 additions & 1 deletion docs/react/back-end-integration/FetchDataComponent.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';

function FetchDataComponent() {
const [userData, setUserData] = useState(null);
Expand All @@ -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) {
Expand Down