e12d0740.49713df2.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{120:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return s})),t.d(r,"rightToc",(function(){return i})),t.d(r,"default",(function(){return u}));var n=t(3),o=t(7),a=(t(0),t(134)),c={id:"destructuring-rest-or-spread-operator",sidebar_label:"Destructuring rest/spread operator",title:"Destructuring Rest/Spread Operator",description:"Destructuring rest/spread operator | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["destructuring rest/spread operator","child component","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Destructuring rest/spread operator",image:"/img/reactpatterns-cover.png"},s={unversionedId:"destructuring-rest-or-spread-operator",id:"destructuring-rest-or-spread-operator",isDocsHomePage:!1,title:"Destructuring Rest/Spread Operator",description:"Destructuring rest/spread operator | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/destructuring-rest-or-spread-operator.md",slug:"/destructuring-rest-or-spread-operator",permalink:"/docs/destructuring-rest-or-spread-operator",version:"current",sidebar_label:"Destructuring rest/spread operator",sidebar:"someSidebar",previous:{title:"Nested Destructuring",permalink:"/docs/nested-destructuring"},next:{title:"Promises over callbacks",permalink:"/docs/promises-over-callbacks"}},i=[{value:"For example",id:"for-example",children:[]}],p={rightToc:i};function u(e){var r=e.components,t=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},p,t,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"The ",Object(a.b)("inlineCode",{parentName:"p"},"...")," rest operator gathers the rest of the items in the props object argument and puts them in the variable rest."),Object(a.b)("p",null,"The ",Object(a.b)("inlineCode",{parentName:"p"},"...")," rest in the JSX is actually JSX syntax for spreading the props in the the rest object into individual props."),Object(a.b)("h2",{id:"for-example"},"For example"),Object(a.b)("p",null,"Without using rest/spread."),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"function Modal(props) {\n  var onClick = props.onClick\n  var show = props.show\n  var backdrop = props.backdrop\n\n  return (\n    <Modal show={show} backdrop={backdrop}>\n      <Button onClick={onClick}>Next</Button>\n    </Modal>\n  )\n}\n")),Object(a.b)("p",null,"Destructuring rest/spread operator."),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-js"}),"function Modal({ onClick, ...rest }) {\n  return (\n    <Modal {...rest}>\n      <Button onClick={onClick}>Next</Button>\n    </Modal>\n  )\n}\n")))}u.isMDXComponent=!0},134:function(e,r,t){"use strict";t.d(r,"a",(function(){return l})),t.d(r,"b",(function(){return f}));var n=t(0),o=t.n(n);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function i(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=o.a.createContext({}),u=function(e){var r=o.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},l=function(e){var r=u(e.components);return o.a.createElement(p.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},b=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),l=u(t),b=n,f=l["".concat(c,".").concat(b)]||l[b]||d[b]||a;return t?o.a.createElement(f,s(s({ref:r},p),{},{components:t})):o.a.createElement(f,s({ref:r},p))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=b;var s={};for(var i in r)hasOwnProperty.call(r,i)&&(s[i]=r[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,c[1]=s;for(var p=2;p<a;p++)c[p]=t[p];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}b.displayName="MDXCreateElement"}}]);