"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Context Api allows us to transfer data that each component can use. So the context api gives us global data. When transferring data through props in nested components, we have props hells with the branching method. To get rid of props hell, we define a Global data (context Api) so we can send the same data to all components via context api, no matter how many components we have." }), "\n", _jsx(_components.p, { children: "For example, we have a nested structure. So we want to go to the Navbar and get the nav links first." }), "\n", _jsx(_components.p, { children: "First of all, we create a components folder. And in this components folder, we create our Navbar.jsx file where we will show the data from the context. Here we want to use the context hook. Again, just like you mentioned use effect and others this also comes from React." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useContext ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "NavbarContext" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"../Context/NavContext\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Navbar" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " id ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useContext" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "NavbarContext" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Context" }), " id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "id", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Context" }), " user", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "user", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Navbar" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We are creating our NavLink.jsx file with links to our component folder." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "NavLinks" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"nav-container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "ul className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"nav-links\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "home", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "about", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "contact", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "NavLinks" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "I create folder named Context and then I create my file named NavContext.jsx. Here I am creating the createContext. crateContext allows us to create context. I have sent the context structure I created to NavbarContext. then I return the data from the props, that is, we send the data from the props to children with the context's provider. We send this data as an object with value." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " createContext ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "NavbarContext" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "createContext" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "GlobalProvider" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "props" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "NavbarContext" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Provider" }) }), " value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "user" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Onur\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "props", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "children" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token maybe-class-name", children: "NavbarContext" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Provider" }) }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "In order to use our components, we define GlobalProvider in our App.js file. and in between we define Navlinks and Navbar. So we can use our user, id number and links." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "\"./App.css\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Navbar" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"./components/Navbar\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "NavLinks" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"./components/NavLinks\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "GlobalProvider" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"./Context/NavContext\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "App" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"App\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "GlobalProvider" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "NavLinks" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Navbar" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token maybe-class-name", children: "GlobalProvider" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "App" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1693668947/lcd1qaboiqydxrqcrm8a.jpg", alt: "onurtaskiran" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };