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 (
    <AppContext.Provider value={data}>
      <ComponentA />
    </AppContext.Provider>
  )
}

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 (
    <ul>
      <li>Name: {data.name}</li>
      <li>Age: {data.age}</li>
    </ul>
  )
}

3. Demo