# React hook - useContext - P2
- Ta có cấu trúc component như hình trên
- `useContext` giúp chúng ta gửi data từ `AppComponent` tới `ComponentC` mà không cần phải truyền qua component trung gian A và B
- Hướng dẫn gửi và nhận data qua `Provider` và `useContext`
## 1. AppComponent - component gửi data
- Tạo ra context và export ra, đặt tên là `AppContext`
- Gửi data muốn truyền qua `AppContext.Provider`
```
import ComponentA from './ComponentA'
export const AppContext = React.createContext()
export default function App() {
const data = { name: 'kentrung', age: 69 }
return (
)
}
```
## 2. ComponentC - component nhận data
- Import `AppContext` đã được tạo ở trên
- Nhận data qua `useContext(AppContext)`
```
import { useContext } from 'react'
import { AppContext } from '../App'
export default function ComponentA() {
const data = useContext(AppContext)
console.log(data)
return (
- Name: {data.name}
- Age: {data.age}
)
}
```
## 3. Demo