{"componentChunkName":"component---src-templates-post-jsx","path":"/an-introduction-to-react-context-api","result":{"data":{"mdx":{"frontmatter":{"slug":"an-introduction-to-react-context-api","title":"An Introduction to React's Context API","date":"13 January, 2020","image":null,"excerpt":"In this article, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling."},"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 _frontmatter = {\n  \"slug\": \"an-introduction-to-react-context-api\",\n  \"date\": \"13 January, 2020\",\n  \"dateForSorting\": \"2020-01-13T12:10:56.022Z\",\n  \"title\": \"An Introduction to React's Context API\",\n  \"tags\": [\"react\"],\n  \"excerpt\": \"In this article, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling.\",\n  \"image\": \"\"\n};\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  _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(\"p\", null, \"I wrote this article on smashing magazine.\"), mdx(\"p\", null, \"You can find it \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.smashingmagazine.com/2020/01/introduction-react-context-api/\"\n  }), \"here\"), \".\"), mdx(\"p\", null, \"I hope you find it helpful.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"an-introduction-to-react-context-api"}}}