{"componentChunkName":"component---gatsby-theme-mdx-deck-src-templates-deck-js","path":"/","matchPath":"/*","webpackCompilationHash":"47d2e26b69d79ca8c08c","result":{"data":{"deck":{"id":"cddb46e4-4c42-5278-be9e-cd1a2636d829","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar theme = customTheme;\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  theme: theme,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function App() {\\n\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"function App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"11:31\",\n    \"11:31\": true\n  }), \"function App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-diff\",\n    \"metastring\": \"42:61\",\n    \"42:61\": true\n  }), \"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-diff\",\n    \"metastring\": \"31:40\",\n    \"31:40\": true\n  }), \"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Keret({ nyelv }) {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles nyelv={nyelv} />\\n        <Tartalom nyelv={nyelv} />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer nyelv={nyelv} />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"58:85\",\n    \"58:85\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Keret({ nyelv }) {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles nyelv={nyelv} />\\n        <Tartalom nyelv={nyelv} />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer nyelv={nyelv} />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer({ nyelv }) {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"88:110\",\n    \"88:110\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Keret({ nyelv }) {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles nyelv={nyelv} />\\n        <Tartalom nyelv={nyelv} />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer nyelv={nyelv} />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer({ nyelv }) {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-diff\",\n    \"metastring\": \"31:61\",\n    \"31:61\": true\n  }), \"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"31:61\",\n    \"31:61\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <div>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Keret({ nyelv }) {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles nyelv={nyelv} />\\n        <Tartalom nyelv={nyelv} />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer nyelv={nyelv} />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer({ nyelv }) {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"31:61\",\n    \"31:61\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <NyelvKontextus.Provider value={nyelv}>\\n      <NyelvValaszto nyelv={nyelv} setNyelv={setNyelv} />\\n      <Kontener nyelv={nyelv} />\\n    </NyelvKontextus.Provider>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Keret({ nyelv }) {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles nyelv={nyelv} />\\n        <Tartalom nyelv={nyelv} />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer nyelv={nyelv} />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer({ nyelv }) {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"31:61\",\n    \"31:61\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <NyelvKontextus.Provider value={nyelv}>\\n      <NyelvValaszto setNyelv={setNyelv} />\\n      <Kontener />\\n    </NyelvKontextus.Provider>\\n  );\\n}\\n\\nfunction Kontener({ nyelv }) {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret nyelv={nyelv} />\\n    </div>\\n  );\\n}\\n\\nfunction Keret({ nyelv }) {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles nyelv={nyelv} />\\n        <Tartalom nyelv={nyelv} />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer nyelv={nyelv} />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer({ nyelv }) {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"31:61\",\n    \"31:61\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <NyelvKontextus.Provider value={nyelv}>\\n      <NyelvValaszto setNyelv={setNyelv} />\\n      <Kontener />\\n    </NyelvKontextus.Provider>\\n  );\\n}\\n\\nfunction Kontener() {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret />\\n    </div>\\n  );\\n}\\n\\nfunction Keret() {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles />\\n        <Tartalom />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom({ nyelv }) {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer({ nyelv }) {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ nyelv, setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-diff\",\n    \"metastring\": \"65:93\",\n    \"65:93\": true\n  }), \"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"65:93\",\n    \"65:93\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <NyelvKontextus.Provider value={nyelv}>\\n      <NyelvValaszto setNyelv={setNyelv} />\\n      <Kontener />\\n    </NyelvKontextus.Provider>\\n  );\\n}\\n\\nfunction Kontener() {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret />\\n    </div>\\n  );\\n}\\n\\nfunction Keret() {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles />\\n        <Tartalom />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles() {\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom() {\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer() {\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ setNyelv }) {\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"65:97\",\n    \"65:97\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <NyelvKontextus.Provider value={nyelv}>\\n      <NyelvValaszto setNyelv={setNyelv} />\\n      <Kontener />\\n    </NyelvKontextus.Provider>\\n  );\\n}\\n\\nfunction Kontener() {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret />\\n    </div>\\n  );\\n}\\n\\nfunction Keret() {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles />\\n        <Tartalom />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles() {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom() {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer() {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ setNyelv }) {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"30:60\",\n    \"30:60\": true\n  }), \"const szotar = {\\n  hun: {\\n    greetings: \\\"\\xDCdv\\xF6zlet\\\",\\n    changeLanguage: \\\"V\\xE1lassz nyelvet\\\",\\n    content: \\\"Ebben az epiz\\xF3dban a React context haszn\\xE1lat\\xE1r\\xF3l lesz sz\\xF3.\\\",\\n    goodLuck: \\\"Sok sikert!\\\",\\n    hungarian: \\\"Magyar\\\",\\n    english: \\\"Angol\\\",\\n    spanish: \\\"Spanyol\\\",\\n  },\\n  en: {\\n    greetings: \\\"Greetings\\\",\\n    changeLanguage: \\\"Choose language\\\",\\n    content: \\\"In this episode we will discuss the use of React context.\\\",\\n    goodLuck: \\\"Good Luck!\\\",\\n    hungarian: \\\"Hungarian\\\",\\n    english: \\\"English\\\",\\n    spanish: \\\"Spanish\\\",\\n  },\\n  spa: {\\n    greetings: \\\"Saludos\\\",\\n    changeLanguage: \\\"Elige lengua\\\",\\n    content: \\\"En este episodio discutiremos el uso del contexto React\\\",\\n    goodLuck: \\\"Buena suerte!\\\",\\n    hungarian: \\\"H\\xFAngaro\\\",\\n    english: \\\"Ingl\\xE9s\\\",\\n    spanish: \\\"Espa\\xF1ol\\\",\\n  },\\n};\\n\\nconst NyelvKontextus = React.createContext();\\nfunction App() {\\n  const [nyelv, setNyelv] = React.useState(\\\"hun\\\"); // \\\"hun\\\" | \\\"en\\\" | \\\"spa\\\"\\n\\n  return (\\n    <NyelvKontextus.Provider value={nyelv}>\\n      <NyelvValaszto setNyelv={setNyelv} />\\n      <Kontener />\\n    </NyelvKontextus.Provider>\\n  );\\n}\\n\\nfunction Kontener() {\\n  return (\\n    <div className=\\\"container-fluid\\\">\\n      <Keret />\\n    </div>\\n  );\\n}\\n\\nfunction Keret() {\\n  return (\\n    <div className=\\\"border p-5 bg-secondary\\\">\\n      <div className=\\\"row\\\">\\n        <Udvozles />\\n        <Tartalom />\\n      </div>\\n      <div className=\\\"row\\\">\\n        <Footer />\\n      </div>\\n    </div>\\n  );\\n}\\n\\nfunction Udvozles() {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <div className=\\\"col-6 bg-warning jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].greetings}!</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Tartalom() {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <div className=\\\"col-6 bg-danger jumbotron m-0 rounded-0\\\">\\n      <h1>{szotar[nyelv].content}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction Footer() {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <div className=\\\"col-12 bg-dark jumbotron rounded-0 text-light\\\">\\n      <h1>{szotar[nyelv].goodLuck}</h1>\\n    </div>\\n  );\\n}\\n\\nfunction NyelvValaszto({ setNyelv }) {\\n  const nyelv = React.useContext(NyelvKontextus);\\n  return (\\n    <nav className=\\\"navbar navbar-light bg-light p-0\\\">\\n      <label className=\\\"w-100 p-3\\\">\\n        <h3>{szotar[nyelv].changeLanguage}:</h3>\\n        <select\\n          className=\\\"form-control\\\"\\n          defaultValue={nyelv}\\n          onChange={(e) => {\\n            setNyelv(e.target.value);\\n          }}\\n        >\\n          <option value=\\\"hun\\\">{szotar[nyelv].hungarian}</option>\\n          <option value=\\\"en\\\"> {szotar[nyelv].english}</option>\\n          <option value=\\\"spa\\\"> {szotar[nyelv].spanish}</option>\\n        </select>\\n      </label>\\n    </nav>\\n  );\\n}\\n\\nReactDOM.render(<App />, document.getElementById(\\\"app-container\\\"));\\n\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/*","isCreatedByStatefulCreatePages":false,"id":"cddb46e4-4c42-5278-be9e-cd1a2636d829","slug":"","title":""}}}