17a0a1d5.690966d7.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),b=r,m=p["".concat(c,".").concat(b)]||p[b]||d[b]||o;return n?a.a.createElement(m,i(i({ref:t},u),{},{components:n})):a.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=b;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u<o;u++)c[u]=n[u];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},73:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(3),a=n(7),o=(n(0),n(134)),c={id:"destructuring",sidebar_label:"What is destructuring?",title:"What is Destructuring?",description:"Destructuring | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["destructuring","react component injection","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Destructuring",image:"/img/reactpatterns-cover.png"},i={unversionedId:"destructuring",id:"destructuring",isDocsHomePage:!1,title:"What is Destructuring?",description:"Destructuring | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/destructuring.md",slug:"/destructuring",permalink:"/docs/destructuring",version:"current",sidebar_label:"What is destructuring?",sidebar:"someSidebar",previous:{title:"External Templating Component",permalink:"/docs/external-templating-component"},next:{title:"Destructuring Function Argument",permalink:"/docs/destructuring-function-argument"}},s=[{value:"For example",id:"for-example",children:[]}],u={rightToc:s};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Destructuring shown assigns properties of an object to variables of the same name. There is also a longhand syntax that allows you to assign to variables of different names. "),Object(o.b)("p",null,"Destructuring works with nested objects, with arrays, and can be used in variable declarations, function return values and function arguments."),Object(o.b)("h2",{id:"for-example"},"For example"),Object(o.b)("p",null,"Without destructuring."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"class Modals extends Component {\n  render() {\n    const modalList = this.props.modalList\n    const currIndex = this.state.currIndex\n    const showModal = this.state.showModal\n\n    // ...\n  }\n}\n")),Object(o.b)("p",null,"Destructuring the objects ",Object(o.b)("inlineCode",{parentName:"p"},"this.props")," and ",Object(o.b)("inlineCode",{parentName:"p"},"this.state"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"class ChainedModals extends Component {\n  render() {\n    const { modalList } = this.props\n    const { currIndex, showModal } = this.state\n    \n    // ...\n  }\n}\n")))}l.isMDXComponent=!0}}]);