{"id":23,"date":"2024-10-07T16:18:26","date_gmt":"2024-10-07T16:18:26","guid":{"rendered":"https:\/\/berlin.nandrin.net\/?p=23"},"modified":"2024-10-07T16:36:03","modified_gmt":"2024-10-07T16:36:03","slug":"context-provider","status":"publish","type":"post","link":"https:\/\/berlin.nandrin.net\/index.php\/react\/context-provider\/","title":{"rendered":"Context provider"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">The Provider<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\n\/\/ Creates the context itself. Intialization is needed for autocomplete.\nexport const ThemeContext = React.createContext({theme:'', toggleTheme: () => {}});\n\nexport default function ThemeContextProvider({children}) {\n\/\/ Create the state in the provider itself\n const &#91;theme,setTheme] = React.useState('light');\n\/\/ define function usable in the context (altering the state)\n const toggleTheme = () => {\n     setTheme(\n         (currTheme)=>{return currTheme==='light'?'dark':'light';\n    });\n }\n  const cxtValue = {\n     theme: theme,\n     toggleTheme\n }\n\/\/ return a wrapped provider with its values\n  return &lt;ThemeContext.Provider value={cxtValue}>\n  {children}\n  &lt;\/ThemeContext.Provider>\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Adding the Provider to the app<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import Page from '.\/Page';\nimport ThemeContextProvider from '.\/ThemeContextProvider.js'\n\nfunction App() {\n  return &lt;ThemeContextProvider>\n    &lt;Page \/>\n    &lt;\/ThemeContextProvider>;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Altering the state in the provider<\/h2>\n\n\n\n<p>You simply use the functions you added to the Provider<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport {ThemeContext} from '.\/ThemeContextProvider';\n\nexport default function Header() {\n\/\/ use the imported context\n    const themeCtx=React.useContext(ThemeContext);\n  return (\n    &lt;header>\n      &lt;h2>React Context demo&lt;\/h2>\n      &lt;button onClick={themeCtx.toggleTheme}>Toggle Theme&lt;\/button>\n    &lt;\/header>\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Consuming the values from the Provider<\/h2>\n\n\n\n<p>Same game :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Header from '.\/Header';\nimport React from 'react';\nimport {ThemeContext} from '.\/ThemeContextProvider';\n\nexport default function Page() {\n\/\/ use the imported context (same)\nconst themeCtx =  React.useContext(ThemeContext);\n  return (\n    &lt;div id=\"app\" className={themeCtx.theme}>\n      &lt;Header \/>\n      &lt;article>\n        &lt;p>\n          Managing a state using a Provider and React Context\n        &lt;\/p>\n      &lt;\/article>\n    &lt;\/div>\n  );\n}\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The Provider Adding the Provider to the app Altering the state in the provider You simply use the functions you added to the Provider Consuming the values from the Provider Same game :<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-23","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":2,"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/posts\/23\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/berlin.nandrin.net\/index.php\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}