79ae5727.f18a5c73.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),s=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,s=function(e,t){if(null==e)return{};var n,r,s={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var i=s.a.createContext({}),l=function(e){var t=s.a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=l(e.components);return s.a.createElement(i.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return s.a.createElement(s.a.Fragment,{},t)}},b=s.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,i=p(e,["components","mdxType","originalType","parentName"]),u=l(n),b=r,f=u["".concat(o,".").concat(b)]||u[b]||d[b]||a;return n?s.a.createElement(f,c(c({ref:t},i),{},{components:n})):s.a.createElement(f,c({ref:t},i))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,o=new Array(a);o[0]=b;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var i=2;i<a;i++)o[i]=n[i];return s.a.createElement.apply(null,o)}return s.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},94:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(3),s=n(7),a=(n(0),n(134)),o={id:"stateless-function",sidebar_label:"Stateless function",title:"Stateless Function (Presentational Component)",description:"Stateless function (Presentational component) | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["Stateless function","statelessfunction","presentational component","presentationalcomponent","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Stateless function (Presentational component)",image:"/img/reactpatterns-cover.png"},c={unversionedId:"stateless-function",id:"stateless-function",isDocsHomePage:!1,title:"Stateless Function (Presentational Component)",description:"Stateless function (Presentational component) | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/stateless-function.md",slug:"/stateless-function",permalink:"/docs/stateless-function",version:"current",sidebar_label:"Stateless function",sidebar:"someSidebar",previous:{title:"Make the API Call in componentDidMount()",permalink:"/docs/make-the-api-call-in-componentdidmount"},next:{title:"Higher-Order Function",permalink:"/docs/higher-order-function"}},p=[{value:"What is Stateless Function?",id:"what-is-stateless-function",children:[]},{value:"For examples",id:"for-examples",children:[]}],i={rightToc:p};function l(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},i,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"what-is-stateless-function"},"What is Stateless Function?"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"Stateless function is a way to define React components as a function. Rather than as a class or via ",Object(a.b)("inlineCode",{parentName:"li"},"React.createClass"),"."),Object(a.b)("li",{parentName:"ul"},"Stateless function does not hold state; just props.")),Object(a.b)("h2",{id:"for-examples"},"For examples"),Object(a.b)("p",null,"Without stateless function, write a presentational component that is just renders props, and doesn't has state."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const UserPassword = React.createClass({\n  render() {\n    return <p>The user password is: {this.props.userpassword}</p>\n  },\n})\n\n// OR\n\nclass Userpassword extends React.Component {\n  render() {\n    return <p>The user password is: {this.props.userpassword}</p>\n  }\n}\n")),Object(a.b)("p",null,"With stateless function."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const UserPassword = function(props) {\n  return <p>The user password is: {this.props.userpassword}</p>\n};\n")),Object(a.b)("p",null,"With stateless function, arrow function, destructuring and implicit return."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const UserPassword = ({userpassword}) => <p>The user password is: {userpassword}</p>\n")),Object(a.b)("p",null,"Stateless function is great for styling as well."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const PrimaryButton = props => {\n  const styles = { background: 'red', color: 'white' }\n\n  return <button {...props} style={styles} />\n}\n")),Object(a.b)("p",null,"Stateless function with event handlers."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"const Button = props => {\n  const onClick = e => console.log('You clicked me!')\n\n  return <button onClick={onClick}>Click me!</button>\n};\n")),Object(a.b)("p",null,"Stateless function can have defined defaultProps, propTypes."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"import PropTypes from 'prop-types'\n\nconst UserPassword = props => <p>The user password is: {this.props.userpassword}</p>\n\nUserPassword.propTypes = {\n  userpassword: PropTypes.string.isRequired,\n}\n\nUsername.defaultProps = {\n  username: 'Jonh',\n}\n")),Object(a.b)("p",null,"Stateless function can have defined contextTypes (when using context, it's simply passed in as the second argument)."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-js"}),"import PropTypes from 'prop-types'\n\nconst UserPassword = (props, context) => <p>User password is {context.password}</p>\n\nWowComponent.contextTypes = {\n  password: PropTypes.string.isRequired,\n}\n")))}l.isMDXComponent=!0}}]);