Rect context API là một cách cơ bản để tạo các biến toàn cục có thể được truyền qua trong ứng dụng React
Context gồm 2 phần là Provider ( cung cấp giá trị ) và Consumer ( sử dụng giá trị )
Tạo context
sử dụng createContext
để tạo context và giá trị mặc định
import React from 'react' export const UserContext = React.createContext({})
Tiếp theo viết Provider và truyền dữ liệu xuống
export const UserProvider = ({children}) =>{ const [user, setUser] = useState({}) // lấy thông tin user từ api useEffect(()=>{ fetch("https://randomuser.me/api") .then(res=>res.json()) .then(data=>{ console.log(data); setUser(data.results[0]) }) .catch(console.log) },[]) return( <UserContext.Provider value={user}> {children} </UserContext.Provider> ) }
sử dụng UserProvider trong file index.js
ReactDOM.render( <UserProvider> <App/> </UserProvider>, document.getElementById('root') );
trong các component con ta lấy giá trị value user bằng useContext ví dụ:
import React , {useContext} from 'react'; import './App.css'; import { UserContext} from "./context/userContext"; function App() { const user = useContext(UserContext) if(!user.id) return <div>loading...</div> return ( <div className="App"> <p> Hi {user.name.title} {user.name.first} {user.name.last } </p> </div> ); } export default App;