chrisfosterelli · September 1, 2022 13:28 · Dec 17, 2021 · Dec 17, 2021
diff --git a/AccountProvider.js b/AccountProvider.js
@@ -5,7 +5,7 @@ function AccountProvider({ children }) {
   const [account, setAccount] = useState(null)
 
   return (
-    <AccountContext.Provider value={{ account, setAccount }}>
+    <AccountContext.Provider value={[ account, setAccount ]}>
       {children}
     </AccountContext.Provider>
   )

diff --git a/MyComponent.js b/MyComponent.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import useAccount from '../hooks/useAccount'
+
+function MyComponent() {
+  const [account, setAccount] = useAccount()
+  return <div>{account ? account.firstName : 'No Account'}</div>
+}
+
+export default MyComponent
diff --git a/AccountContext.js b/AccountContext.js
@@ -0,0 +1,2 @@
+import { createContext } from 'react'
+export default createContext(null)
diff --git a/AccountProvider.js b/AccountProvider.js
@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import AccountContext from '../contexts/AccountContext'
+
+function AccountProvider({ children }) {
+  const [account, setAccount] = useState(null)
+
+  return (
+    <AccountContext.Provider value={{ account, setAccount }}>
+      {children}
+    </AccountContext.Provider>
+  )
+}
+
+AccountProvider.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default AccountProvider
diff --git a/index.js b/index.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import App from './components/app/App'
+import AccountProvider from './providers/AccountProvider'
+
+ReactDOM.render(
+  <AccountProvider>
+    <App />
+  </AccountProvider>,
+  document.getElementById('root')
+)
diff --git a/useAccount.js b/useAccount.js
@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import AccountContext from '../contexts/AccountContext'
+
+function useAccount() {
+  const value = useContext(AccountContext)
+  if (value === null)
+    throw new Error('<AccountProvider> is not in the parent tree')
+  return value
+}
+
+export default useAccount
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { createContext } from 'react'
		export default createContext(null)