https://codexam.vercel.app/_next/static/chunks/pages/docs/react/react7-6ad7e2b8e81ea92f.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8829],{2968:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/react/react7",function(){return n(67081)}])},35334:function(e,s,n){"use strict";var r=n(11527),t=n(78375),o=n(50959);s.Z=e=>{let{type:s,emoji:n,title:a,message:i,links:l}=e,c={info:"nx-border-blue-200 nx-bg-blue-100 nx-text-blue-900 dark:nx-border-blue-200/30 dark:nx-bg-blue-900/30 dark:nx-text-blue-200",warning:"nx-border-red-200 nx-bg-red-100 nx-text-red-900 dark:nx-border-red-200/30 dark:nx-bg-red-900/30 dark:nx-text-red-200",success:"nx-border-green-200 nx-bg-green-100 nx-text-green-900 dark:nx-border-green-200/30 dark:nx-bg-green-900/30 dark:nx-text-green-200",error:"nx-border-red-200 nx-bg-red-100 nx-text-red-900 dark:nx-border-red-200/30 dark:nx-bg-red-900/30 dark:nx-text-red-200",primary:"nx-border-purple-200 nx-bg-purple-100 nx-text-purple-900 dark:nx-border-purple-200/30 dark:nx-bg-purple-900/30 dark:nx-text-purple-200",secondary:"nx-border-yellow-200 nx-bg-yellow-100 nx-text-yellow-900 dark:nx-border-yellow-200/30 dark:nx-bg-yellow-900/30 dark:nx-text-yellow-200",tertiary:"nx-border-teal-200 nx-bg-teal-100 nx-text-teal-900 dark:nx-border-teal-200/30 dark:nx-bg-teal-900/30 dark:nx-text-teal-200"},d={info:"text-white bg-blue-900 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900",warning:"text-white bg-red-900 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-200 font-medium rounded-lg text-xs px-3 py-1.5 mr--2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900",success:"text-white bg-green-900 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-green-800 dark:hover:bg-green-900",error:"text-white bg-red-900 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900",primary:"text-white bg-purple-900 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-purple-800 dark:hover:bg-purple-900",secondary:"text-white bg-yellow-900 hover:bg-yellow-800 focus:ring-4 focus:outline-none focus:ring-yellow-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-yellow-800 dark:hover:bg-yellow-900",tertiary:"text-white bg-teal-900 hover:bg-teal-800 focus:ring-4 focus:outline-none focus:ring-teal-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-teal-800 dark:hover:bg-teal-900"},h={info:"headingGradientTag",warning:"headingGradientTag",success:"headingGradientTag",error:"headingGradientTag",primary:"headingGradientTag",secondary:"headingGradientTag",tertiary:"headingGradientTag"},[x,p]=(0,o.useState)(!1);return(0,o.useEffect)(()=>{window.innerWidth>1068&&p(!0)},[]),(0,r.jsx)(r.Fragment,{children:x?(0,r.jsxs)(t.E.div,{initial:{scale:0},animate:{scale:1},className:"p-4 mb-4 border border-".concat(s,"-300 rounded-lg ").concat(c[s]," "),whileHover:{y:[0,-10,0]},transition:{duration:1.4,ease:"easeInOut"},children:[(0,r.jsxs)("div",{className:"flex items-center",children:[(0,r.jsx)("div",{className:"flex-shrink-0 h-6 w-6",children:(0,r.jsx)("span",{className:"".concat(h[s],"  text-2xl leading-none font-semibold"),children:(0,r.jsx)("div",{className:"w-2 h-2 mb-4 mr-5",children:n})})}),(0,r.jsxs)("div",{className:"ml-3",children:[(0,r.jsx)("h3",{className:"".concat(h[s]," text-lg leading-6 font-medium"),children:a}),(0,r.jsx)("div",{className:"mt-2 mb-4 text-base leading-6 text-gray-900 dark:text-gray-300",children:i})]})]}),l.map((e,n)=>{let{link:t,linkText:o}=e;return(0,r.jsx)("a",{href:t,className:"".concat(d[s]," transition duration-500 ease-in-out transform hover:translate-y-2"),children:(0,r.jsx)("div",{className:"text-gray-300",children:o})},n)})]}):(0,r.jsxs)("div",{className:"p-4 mb-4 border border-".concat(s,"-300 rounded-lg ").concat(c[s]," "),children:[(0,r.jsxs)("div",{className:"flex items-center",children:[(0,r.jsx)("div",{className:"flex-shrink-0 h-6 w-6",children:(0,r.jsx)("span",{className:"".concat(h[s],"  text-2xl leading-none font-semibold"),children:(0,r.jsx)("div",{className:"w-2 h-2 mb-4 mr-5",children:n})})}),(0,r.jsxs)("div",{className:"ml-3",children:[(0,r.jsx)("h3",{className:"".concat(h[s]," text-lg leading-6 font-medium"),children:a}),(0,r.jsx)("div",{className:"mt-2 mb-4 text-base leading-6 text-gray-300",children:i})]})]}),l.map((e,n)=>{let{link:t,linkText:o}=e;return(0,r.jsx)("a",{href:t,className:"".concat(d[s]," transition duration-500 ease-in-out transform hover:translate-y-2"),children:(0,r.jsx)("div",{className:"text-gray-300",children:o})},n)})]})})}},41093:function(e,s,n){"use strict";n.d(s,{A:function(){return c},L:function(){return l}});var r=n(11527),t=n(45924),o=n(78375),a=n(57953),i=n.n(a);function l(e){let{large:s,centered:n,children:a,lightOnly:l,className:c,...d}=e;return(0,r.jsx)(o.E.div,{initial:{opacity:0}

1,whileInView:{opacity:1},viewport:{once:!0,margin:"-20px"},transition:{duration:.5,delay:.1},className:(0,t.Z)(i().feature,s&&i().large,n&&i().centered,l&&i()["light-only"],c),...d,children:a})}function c(e){let{children:s}=e;return(0,r.jsx)("div",{className:i().features,children:s})}},96052:function(e,s,n){"use strict";var r=n(11527);n(50959),s.Z=function(e){return(0,r.jsxs)("svg",{fill:"currentColor",className:"PhotoView-Slider__toolbarIcon",width:"2.5em",height:"2.5em",viewBox:"0 0 214.367 214.367",...e,children:[(0,r.jsx)("path",{stroke:"currentColor",d:"M202.403,95.22c0,46.312-33.237,85.002-77.109,93.484v25.663l-69.76-40l69.76-40v23.494  c27.176-7.87,47.109-32.964,47.109-62.642c0-35.962-29.258-65.22-65.22-65.22s-65.22,29.258-65.22,65.22  c0,9.686,2.068,19.001,6.148,27.688l-27.154,12.754c-5.968-12.707-8.994-26.313-8.994-40.441C11.964,42.716,54.68,0,107.184,0  S202.403,42.716,202.403,95.22z"}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{}),(0,r.jsx)("g",{})]})}},40227:function(e,s,n){"use strict";var r=n(11527),t=n(50959);let o=(0,t.createContext)({answer:"",selected:"",setSelected:e=>{}});function a(e){let{answer:s,children:n}=e,[a,i]=(0,t.useState)("");return(0,r.jsx)(o.Provider,{value:{answer:s,selected:a,setSelected:i},children:n})}a.Option=function(e){let{children:s}=e,{answer:n,selected:a,setSelected:i}=(0,t.useContext)(o),[l,c]=(0,t.useState)("default-answer-button"),d=n===s.charAt(0),h=a===s.charAt(0);return(0,r.jsxs)("button",{className:"text-xs lg:text-base ".concat(h?d?"correct-answer-button":"wrong-answer-button":"".concat(l)),onClick:()=>{h?i(""):i(s.charAt(0))},children:[(0,r.jsx)("span",{className:"mr-1 transition-all duration-200 ease-linear ".concat(h&&!d?null:"hidden"),children:"❌"}),(0,r.jsx)("span",{className:"mr-1 transition-all duration-200 ease-linear ".concat(h&&d?null:"hidden"),children:"✅"}),s]})},s.Z=a},78605:function(e,s,n){"use strict";var r=n(11527);n(50959),s.Z=function(e){let{render:s,children:n}=e;return n?(0,r.jsxs)("div",{className:"lg:flex lg:flex-row items-center",children:[(0,r.jsx)("div",{className:"w-[100%] mr-4",children:n}),(0,r.jsx)("div",{className:"flex flex-col 2 justify-between w-full",children:s})]}):(0,r.jsx)("div",{className:"lg:flex lg:flex-row items-center",children:(0,r.jsx)("div",{className:"flex flex-col 2 justify-between w-full",children:s})})}},67081:function(e,s,n){"use strict";n.r(s);var r=n(11527),t=n(83850),o=n(51024),a=n(14291);n(38706),n(53127);var i=n(26736);n(42737);var l=n(44637);n(36887);var c=n(96052),d=n(35334);n(41093),n(44970),n(78605),n(40227);let h={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,i.ah)(),e.components);return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(x,{...e})}):x(e)},pageOpts:{filePath:"pages/docs/react/react7.mdx",route:"/docs/react/react7",headings:[{depth:2,value:"⭐ What is Props ?",id:"-what-is-props-"},{depth:2,value:"⭐ Syntax",id:"-syntax"},{depth:4,value:"⚡ Playground",id:"-playground"},{depth:2,value:"⭐ Props Types",id:"-props-types"},{depth:2,value:"⭐ Syntax",id:"-syntax-1"},{depth:2,value:"⭐ Experiment Props Types",id:"-experiment-props-types"},{depth:3,value:"▶️ Props Types",id:"️-props-types"},{depth:3,value:"▶️ Default Props",id:"️-default-props"},{depth:3,value:"▶️ isRequired",id:"️-isrequired"}],pageMap:[{kind:"Meta",data:{index:{title:"CodeXam",type:"page",display:"hidden",theme:{layout:"raw"}},playground:{title:"Playground",type:"page",theme:{toc:!1,layout:"raw",footer

1:!1}},showcase:{title:"Guide",type:"page",theme:{toc:!0}},xamdoc:{title:"Documentation",type:"page",theme:{toc:!0},items:{CXBS:{title:"CodeXam Blog Setup",href:"/xamdoc"},"Front Page":{title:"Front Page"}}},docs:{title:"Tutorial",type:"page",theme:{toc:!0}},xamdev:{title:"Writer's Space",type:"page",theme:{toc:!0}},faq:{title:"FAQ",type:"menu",items:{about:{title:"About CodeXam",href:"/docs/about"},community:{title:"Community"},soonmsz:{title:"Short Message",type:"/docs/soonmsz",display:"hidden"}}},confirm:"Confirm"}},{kind:"MdxPage",name:"confirm",route:"/confirm"},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Folder",name:"DSA",route:"/docs/DSA",children:[{kind:"Meta",data:{erb:"Roadmap",dsr:"DataStructures Introduction",arr:"Array Data Structure",llds:"Linked List Data Structure"}},{kind:"MdxPage",name:"arr",route:"/docs/DSA/arr"},{kind:"MdxPage",name:"dsr",route:"/docs/DSA/dsr"},{kind:"MdxPage",name:"erb",route:"/docs/DSA/erb"},{kind:"MdxPage",name:"llds",route:"/docs/DSA/llds"}]},{kind:"MdxPage",name:"DSA",route:"/docs/DSA"},{kind:"Folder",name:"Hooks",route:"/docs/Hooks",children:[{kind:"Folder",name:"React",route:"/docs/Hooks/React",children:[{kind:"Meta",data:{useState:"useState",useEffect:"Useeffect"}},{kind:"MdxPage",name:"useEffect",route:"/docs/Hooks/React/useEffect"},{kind:"MdxPage",name:"useState",route:"/docs/Hooks/React/useState"}]},{kind:"MdxPage",name:"React",route:"/docs/Hooks/React"},{kind:"Meta",data:{React:"React"}}]},{kind:"MdxPage",name:"Hooks",route:"/docs/Hooks"},{kind:"Folder",name:"OopsJava",route:"/docs/OopsJava",children:[{kind:"Meta",data:{java0:"Hand Written Small Notes",java1:"Introduction Of OOPs",java2:"Basic Terminology"}},{kind:"MdxPage",name:"java0",route:"/docs/OopsJava/java0"},{kind:"MdxPage",name:"java1",route:"/docs/OopsJava/java1"},{kind:"MdxPage",name:"java2",route:"/docs/OopsJava/java2"}]},{kind:"MdxPage",name:"OopsJava",route:"/docs/OopsJava"},{kind:"Meta",data:{index:{title:"Video Tutorial",type:"page",theme:{typesetting:"article",layout:"full"}},"-- DSA --":{type:"separator",title:"Data Structures and Algorithms"},DSA:"Java,C++,Python & C","-- OOPs --":{type:"separator",title:"Object Oriented Programming"},OopsJava:"Java","-- Coding Practice --":{type:"separator",title:"Coding Practice"},leetcode:"Leetcode","-- DBMS --":{type:"separator",title:"Database Management System"},dbms:"DBMS","-- Machine Learning --":{type:"separator",title:"Machine Learning"},machinelearning:"Machine Learning Theory","-- Cyber Security --":{type:"separator",title:"Cyber Security"},cybersecurity:"Cyber Security","-- WebDev & AppDev --":{type:"separator",title:"Web & App Development"},html:"HTML Tutorial",tailwindcss:"Tailwind CSS Tutorial",js:"JavaScript Tutorial",react:"React Tutorial",reactnative:"React NativeTutorial",next:"Next.js Tutorial",Hooks:"React/Next Hooks",node:"Node.js Tutorial",docker:"Docker Tutorial","-- Projects --":{type:"separator",title:"Project Based Coaching"},project:"Project Tutorial","-- About --":{type:"separator",title:"Advance"},about:"CodeXam Website Project",soonmsz:"Message",exp:"Experiment"}},{kind:"MdxPage",name:"about",route:"/docs/about"},{kind:"Folder",name:"cybersecurity",route:"/docs/cybersecurity",children:[{kind:"Meta",data:{mod1:"Introduction To CyberSecurity"}},{kind:"MdxPage",name:"mod1",route:"/docs/cybersecurity/mod1"}]},{kind:"MdxPage",name:"cybersecurity",route:"/docs/cybersecurity"},{kind:"Folder",name:"dbms",route:"/docs/dbms",children:[{kind:"Meta",data:{dbms1:"Introduction",dbms2:"DBMS Architecture",dbms3:"ER Model",dbms4:"Extended ER Features",dbms5:"Banking System ER"}},{kind:"MdxPage",name:"dbms1",route:"/docs/dbms/dbms1"},{kind:"MdxPage",name:"dbms2",route:"/docs/dbms/dbms2"},{kind:"MdxPage",name:"dbms3",route:"/docs/dbms/dbms3"},{kind:"MdxPage",name:"dbms4",route:"/docs/dbms/dbms4"},{kind:"MdxPage",name:"dbms5",route:"/docs/dbms/dbms5"}]},{kind:"MdxPage",name:"dbms",route:"/docs/dbms"},{kind:"MdxPage",name:"docker",route:"/docs/docker"},{kind:"MdxPage",name:"exp",route:"/docs/exp"},{kind:"Folder",name:"html",route:"/docs/html",children:[{kind:"Meta",data:{cheatsheet:"HTML Cheatsheet",chapter1:"Html Basics"}},{kind:"MdxPage",name:"chapter1",route:"/docs/html/chapter1"},{kind:"MdxPage",name:"cheatsheet",route:"/docs/html/cheatsheet"}]},{kind:"MdxPage",name:"html",route:"/docs/html"},{kind:"MdxPage",name:"index",route:"/docs"},{kind:"Folder",name:"js",route:"/docs/js",children:[{kind:"Meta",data:{js1:"Unknown Facts",js2:"Setup Guide",js3:"Our IDE Use Guide",js4:"Variables And DataTypes",js5:"Primitives and Objects",js6:"Revision 1 ",js7:"Operators & Expressions",js8:"Comments Out",js9:"Prompt & Alert",js10:"Conditional Statements",js11:"Switch Statement",js12:"Ternary Operator",js13:"Revision 2",js14:"Loops in JavaScript",js15:"For Loop",js16:"While Loop",js17:"Do While Loop",js18:"Functions",js19:"Revision 3",js20:"Strings",js21:"String Methods",js22:"Escape Characters",js23:"Revision 4",js24:"Arrays",js25:"Array Methods",js26:"Revision 5"}},{kind:"MdxPage",name:"js1",route:"/docs/js/js1"},{kind:"MdxPage",name:"js10",route:"/docs/js/js10"},{kind:"MdxPage",name:"js11",route:"/docs/js/js11"},{kind:"MdxPage",name:"js12",route:"/docs/js/js12"},{kind:"MdxPage",name:"js13",route:"/docs/js/js13"},{kind:"MdxPage",name:"js14",route:"/docs/js/js14"},{kind:"MdxPage",name:"js15",route:"/docs/js/js15"},{kind:"MdxPage",name:"js16",route:"/docs/js/js16"},{kind:"MdxPage",name:"js17",route:"/docs/js/js17"},{kind:"MdxPage",name:"js18",route:"/docs/js/js18"},{kind:"MdxPage",name:"js19",route:"/docs/js/js19"},{kind:"MdxPage",name:"js2",route:"/docs/js/js2"},{kind:"MdxPage",name:"js20",route:"/docs/js/js20"},{kind:"MdxPage",name:"js21",route:"/docs/js/js21"},{kind:"MdxPage",name:"js22",route:"/docs/js/js22"},{kind:"MdxPage",name:"js23",route:"/docs/js/js23"},{kind:"MdxPage",name:"js24",route:"/docs/js/js24"},{kind:"MdxPage",name:"js25",route:"/docs/js/js25"},{kind:"MdxPage",name:"js26",route:"/docs/js/js26"},{kind:"MdxPage",name:"js3",route:"/docs/js/js3"},{kind:"MdxPage",name:"js4",route:"/docs/js/js4"},{kind:"MdxPage",name:"js5",route:"/docs/js/js5"},{kind:"MdxPage",name:"js6",route:"/docs/js/js6"},{kind:"MdxPage",name:"js7",route:"/docs/js/js7"},{kind:"MdxPage",name:"js8",route:"/docs/js/js8"},{kind:"MdxPage",name:"js9",route:"/docs/js/js9"}]},{kind:"MdxPage",name:"js",route:"/docs/js"},{kind:"Folder",name:"leetcode",route:"/docs/leetcode",children:[{kind:"Meta",data:{lc1:"Two Sum"}},{kind:"MdxPage",name:"lc1",route:"/docs/leetcode/lc1"}]},{kind:"MdxPage",name:"leetcode",route:"/docs/leetcode"},{kind:"Folder",name:"machinelearning",route:"/docs/machinelearning",children:[{kind:"Meta",data:{chapter1:"Introduction Of ML",chapter2:"Features And Labels",chapter3:"Data Collection process",chapter4:"Supervised And Unsupervised Learning",sl:"Supervised Details",usl:"Unsupervised Details",chapter5:"Scikit Learn",chapter6:"Training And Test Data",sml:"Scalable Machine Learning"}},{kind:"MdxPage",name:"chapter1",route:"/docs/machinelearning/chapter1"},{kind:"MdxPage",name:"chapter2",route:"/docs/machinelearning/chapter2"},{kind:"MdxPage",name:"chapter3",route:"/docs/machinelearning/chapter3"},{kind:"MdxPage",name:"chapter4",route:"/docs/machinelearning/chapter4"},{kind:"MdxPage",name:"chapter5",route:"/docs/machinelearning/chapter5"},{kind:"MdxPage",name:"chapter6",route:"/docs/machinelearning/chapter6"},{kind:"MdxPage",name:"sl",route:"/docs/machinelearning/sl"},{kind:"MdxPage",name:"sml",route:"/docs/machinelearning/sml"},{kind:"MdxPage",name:"usl",route:"/docs/machinelearning/usl"}]},{kind:"MdxPage",name:"machinelearning",route:"/docs/machinelearning"},{kind:"Folder",name:"next",route:"/docs/next",children:[{kind:"Meta",data:{next1:"Introduction"}},{kind:"MdxPage",name:"next1",route:"/docs/next/next1"}]},{kind:"MdxPage",name:"next",route:"/docs/next"},{kind:"Folder",name:"node",route:"/docs/node",children:[{kind:"Meta",data:{node1:"Introduction to Node js",node2:"Basic Concepts",node3:"Install and Set Up",node4:"First Node js Script",node5:"Fundamentals and Features",node6:"Core Modules",node7:"Create Server",node8:"package.json file",node9:"Challenge",node10:"Nodemon package",node11:"Create a Basic API",node12:"Taking CmdLine Input ",node13:"Display file list",node14:"CRUD Operations",node15:"Asynchronous",node16:"Handle Asynchronous Data",node17:"Node js Works: Event Loop",node18:" Express js Framework",node19:"Routing with Express.js",node20:"Rendering HTML Pages",node21:"Make Html Pages",node22:"Remove extension from URL"}},{kind:"MdxPage",name:"node1",route:"/docs/node/node1"},{kind:"MdxPage",name:"node10",route:"/docs/node/node10"},{kind:"MdxPage",name:"node11",route:"/docs/node/node11"},{kind:"MdxPage",name:"node12",route:"/docs/node/node12"},{kind:"MdxPage",name:"node13",route:"/docs/node/node13"},{kind:"MdxPage",name:"node14",route:"/docs/node/node14"},{kind:"MdxPage",name:"node15",route:"/docs/node/node15"},{kind:"MdxPage",name:"node16",route:"/docs/node/node16"},{kind:"MdxPage",name:"node17",route:"/docs/node/node17"},{kind:"MdxPage",name:"node18",route:"/docs/node/node18"},{kind:"MdxPage",name:"node19",route:"/docs/node/node19"},{kind:"MdxPage",name:"node2",route:"/docs/node/node2"},{kind:"MdxPage",name:"node20",route:"/docs/node/node20"},{kind:"MdxPage",name:"node21",route:"/docs/node/node21"},{kind:"MdxPage",name:"node22",route:"/docs/node/node22"},{kind:"MdxPage",name:"node3",route:"/docs/node/node3"},{kind:"MdxPage",name:"node4",route:"/docs/node/node4"},{kind:"MdxPage",name:"node5",route:"/docs/node/node5"},{kind:"MdxPage",name:"node6",route:"/docs/node/node6"},{kind:"MdxPage",name:"node7",route:"/docs/node/node7"},{kind:"MdxPage",name:"node8",route:"/docs/node/node8"},{kind:"MdxPage",name:"node9",route:"/docs/node/node9"}]},{kind:"MdxPage",name:"node",route:"/docs/node"},{kind:"Folder",name:"project",route:"/docs/project",children:[{kind:"Folder",name:"CrowdDeFiX",route:"/docs/project/CrowdDeFiX",children:[{kind:"Meta",data:{cdfx1:"Installation",cdfx2:"Smart Contract",cdfx3:"Deployment",cdfx4:"Client Setup",cdfx5:"Basic Setup (main.jsx)",cdfx6:"Tailwind Setup",cdfx7:"Assets",cdfx8:"Folder Setup",cdfx9:"App.jsx",cdfx10:"Page's files configuration"}},{kind:"MdxPage",name:"cdfx1",route:"/docs/project/CrowdDeFiX/cdfx1"},{kind:"MdxPage",name:"cdfx10",route:"/docs/project/CrowdDeFiX/cdfx10"},{kind:"MdxPage",name:"cdfx2",route:"/docs/project/CrowdDeFiX/cdfx2"},{kind:"MdxPage",name:"cdfx3",route:"/docs/project/CrowdDeFiX/cdfx3"},{kind:"MdxPage",name:"cdfx4",route:"/docs/project/CrowdDeFiX/cdfx4"},{kind:"MdxPage",name:"cdfx5",route:"/docs/project/CrowdDeFiX/cdfx5"},{kind:"MdxPage",name:"cdfx6",route:"/docs/project/CrowdDeFiX/cdfx6"},{kind:"MdxPage",name:"cdfx7",route:"/docs/project/CrowdDeFiX/cdfx7"},{kind:"MdxPage",name:"cdfx8",route:"/docs/project/CrowdDeFiX/cdfx8"},{kind:"MdxPage",name:"cdfx9",route:"/docs/project/CrowdDeFiX/cdfx9"}]},{kind:"MdxPage",name:"CrowdDeFiX",route:"/docs/project/CrowdDeFiX"},{kind:"Folder",name:"DeCryptX",route:"/docs/project/DeCryptX",children:[{kind:"Meta",data:{dcx1:"Intro",dcx2:"Cranq Setup",dcx3:"Metamask"}},{kind:"MdxPage",name:"dcx1",route:"/docs/project/DeCryptX/dcx1"},{kind:"MdxPage",name:"dcx2",route:"/docs/project/DeCryptX/dcx2"},{kind:"MdxPage",name:"dcx3",route:"/docs/project/DeCryptX/dcx3"}]},{kind:"Meta",data:{xt:"xamtrack",gg:"OctoSpace",CrowdDeFiX:"CrowdDeFiX",DeCryptX:" DeCryptX",mer

1nchat:"Mernchat"}},{kind:"Folder",name:"gg",route:"/docs/project/gg",children:[{kind:"Meta",data:{"-- Backend ⩒ --":{type:"separator",title:"Backend ▽"},gg1:"Installation",gg2:"Backend & Middleware",gg3:"MongoDB Registering",gg4:"ERD Model",gg5:"Model 1 - User",gg6:"Auth Routes 1",gg7:"Auth Routes 2",gg8:"Auth Routes 3",gg9:"Auth Routes 4",gg10:"Users Routes 1",gg11:"Users Routes 2",gg12:"Users Routes 3",gg13:"Posts Routes 1",gg14:"Posts Routes 2",gg15:"Posts Routes 3",gg16:"Backend Data adding",gg17:"Data Inserting","-- Frontend ⩒ --":{type:"separator",title:"Frontend ▽"},gg18:"Frontend Setup",gg19:"Redux Setup"}},{kind:"MdxPage",name:"gg1",route:"/docs/project/gg/gg1"},{kind:"MdxPage",name:"gg10",route:"/docs/project/gg/gg10"},{kind:"MdxPage",name:"gg11",route:"/docs/project/gg/gg11"},{kind:"MdxPage",name:"gg12",route:"/docs/project/gg/gg12"},{kind:"MdxPage",name:"gg13",route:"/docs/project/gg/gg13"},{kind:"MdxPage",name:"gg14",route:"/docs/project/gg/gg14"},{kind:"MdxPage",name:"gg15",route:"/docs/project/gg/gg15"},{kind:"MdxPage",name:"gg16",route:"/docs/project/gg/gg16"},{kind:"MdxPage",name:"gg17",route:"/docs/project/gg/gg17"},{kind:"MdxPage",name:"gg18",route:"/docs/project/gg/gg18"},{kind:"MdxPage",name:"gg19",route:"/docs/project/gg/gg19"},{kind:"MdxPage",name:"gg2",route:"/docs/project/gg/gg2"},{kind:"MdxPage",name:"gg3",route:"/docs/project/gg/gg3"},{kind:"MdxPage",name:"gg4",route:"/docs/project/gg/gg4"},{kind:"MdxPage",name:"gg5",route:"/docs/project/gg/gg5"},{kind:"MdxPage",name:"gg6",route:"/docs/project/gg/gg6"},{kind:"MdxPage",name:"gg7",route:"/docs/project/gg/gg7"},{kind:"MdxPage",name:"gg8",route:"/docs/project/gg/gg8"},{kind:"MdxPage",name:"gg9",route:"/docs/project/gg/gg9"}]},{kind:"MdxPage",name:"gg",route:"/docs/project/gg"},{kind:"MdxPage",name:"mernchat",route:"/docs/project/mernchat"},{kind:"Folder",name:"xt",route:"/docs/project/xt",children:[{kind:"Meta",data:{xt1:"Introduction",xt2:"create Server with Express JS",xt3:"Routes & Controllers",xt4:"Testing Postman & Thunderbolt",xt5:"MongoDB & Mongoose",xt6:"Secure with DOTENV",xt7:"Create Schema & Model",xt8:"Stored API data",xt9:"Read Data from Database",xt10:"Filtration & Searching Functionality",xt11:"Improve Filter in API ",xt12:"Bugs Handling",xt13:"Test Data Making Script",xt14:"Regex - Advance Search ",xt15:"SORT functionality",xt16:"Return Specific Document Fields",xt17:"Pagination",xt18:"Host REST API"}},{kind:"MdxPage",name:"xt1",route:"/docs/project/xt/xt1"},{kind:"MdxPage",name:"xt10",route:"/docs/project/xt/xt10"},{kind:"MdxPage",name:"xt11",route:"/docs/project/xt/xt11"},{kind:"MdxPage",name:"xt12",route:"/docs/project/xt/xt12"},{kind:"MdxPage",name:"xt13",route:"/docs/project/xt/xt13"},{kind:"MdxPage",name:"xt14",route:"/docs/project/xt/xt14"},{kind:"MdxPage",name:"xt15",route:"/docs/project/xt/xt15"},{kind:"MdxPage",name:"xt16",route:"/docs/project/xt/xt16"},{kind:"MdxPage",name:"xt17",route:"/docs/project/xt/xt17"},{kind:"MdxPage",name:"xt18",route:"/docs/project/xt/xt18"},{kind:"MdxPage",name:"xt2",route:"/docs/project/xt/xt2"},{kind:"MdxPage",name:"xt3",route:"/docs/project/xt/xt3"},{kind:"MdxPage",name:"xt4",route:"/docs/project/xt/xt4"},{kind:"MdxPage",name:"xt5",route:"/docs/project/xt/xt5"},{kind:"MdxPage",name:"xt6",route:"/docs/project/xt/xt6"},{kind:"MdxPage",name:"xt7",route:"/docs/project/xt/xt7"},{kind:"MdxPage",name:"xt8",route:"/docs/project/xt/xt8"},{kind:"MdxPage",name:"xt9",route:"/docs/project/xt/xt9"}]},{kind:"MdxPage",name:"xt",route:"/docs/project/xt"}]},{kind:"MdxPage",name:"project",route:"/docs/project"},{kind:"Folder",name:"react",route:"/docs/react",children:[{kind:"Meta",data:{react1:"Introduction",react2:"Installation",react3:"Folder Structure",react4:"jsx",react5:"Components",react6:"Styling Components",react7:"Props & Props-Types",react8:"Create Movie Website",react9:"Tools & If-Else & ternary",reactallinone:"Interview Questions"}},{kind:"MdxPage",name:"react1",route:"/docs/react/react1"},{kind:"MdxPage",name:"react2",route:"/docs/react/react2"},{kind:"MdxPage",name:"react3",route:"/docs/react/react3"},{kind:"MdxPage",name:"react4",route:"/docs/react/react4"},{kind:"MdxPage",name:"react5",route:"/docs/react/react5"},{kind:"MdxPage",name:"react6",route:"/docs/react/react6"},{kind:"MdxPage",name:"react7",route:"/docs/react/react7"},{kind:"MdxPage",name:"react8",route:"/docs/react/react8"},{kind:"MdxPage",name:"react9",route:"/docs/react/react9"},{kind:"MdxPage",name:"reactallinone",route:"/docs/react/reactallinone"}]},{kind:"MdxPage",name:"react",route:"/docs/react"},{kind:"Folder",name:"reactnative",route:"/docs/reactnative",children:[{kind:"Meta",data:{react1:"Installation",react2:"CreateApp & Debugging",react3:"File Structure",react4:"Hello World App",react5:"Styling",react6:"Hook : Dark & light",react7:"Bug Info - version 63","-- Second App ⩒ --":{type:"separator",title:"Second App ⩒"},react8:"Multi file components"}},{kind:"MdxPage",name:"react1",route:"/docs/reactnative/react1"},{kind:"MdxPage",name:"react2",route:"/docs/reactnative/react2"},{kind:"MdxPage",name:"react3",route:"/docs/reactnative/react3"},{kind:"MdxPage",name:"react4",route:"/docs/reactnative/react4"},{kind:"MdxPage",name:"react5",route:"/docs/reactnative/react5"},{kind:"MdxPage",name:"react6",route:"/docs/reactnative/react6"},{kind:"MdxPage",name:"react7",route:"/docs/reactnative/react7"},{kind:"MdxPage",name:"react8",route:"/docs/reactnative/react8"}]},{kind:"MdxPage",name:"reactnative",route:"/docs/reactnative"}

1,{kind:"MdxPage",name:"soonmsz",route:"/docs/soonmsz",frontMatter:{headeronly:!0,searchable:!1}},{kind:"Folder",name:"tailwindcss",route:"/docs/tailwindcss",children:[{kind:"Meta",data:{chapter1:"Chapter 1",chapter2:"Chapter 2"}},{kind:"MdxPage",name:"chapter1",route:"/docs/tailwindcss/chapter1"},{kind:"MdxPage",name:"chapter2",route:"/docs/tailwindcss/chapter2"}]},{kind:"MdxPage",name:"tailwindcss",route:"/docs/tailwindcss"}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"CodeXam – Best Coding Learning Platform"}},{kind:"Folder",name:"playground",route:"/playground",children:[{kind:"MdxPage",name:"js",route:"/playground/js"},{kind:"Meta",data:{js:"JS"}}]},{kind:"Folder",name:"showcase",route:"/showcase",children:[{kind:"Meta",data:{bd1:{title:"Backend Development - Guide 1",type:"page",display:"hidden",theme:{display:"hidden"}}}},{kind:"MdxPage",name:"bd1",route:"/showcase/bd1"}]},{kind:"MdxPage",name:"showcase",route:"/showcase",frontMatter:{title:"Helpful Guide for Beginners"}},{kind:"Folder",name:"xamdev",route:"/xamdev",children:[{kind:"Meta",data:{index:"Introduction","-- Question --":{type:"separator",title:"QNA Template"},question:"Question & Answer Template"}},{kind:"MdxPage",name:"index",route:"/xamdev"},{kind:"Folder",name:"question",route:"/xamdev/question",children:[{kind:"Meta",data:{longquestion:"Long Question Template",mcq:"MCQ Template"}},{kind:"MdxPage",name:"longquestion",route:"/xamdev/question/longquestion"},{kind:"MdxPage",name:"mcq",route:"/xamdev/question/mcq"}]},{kind:"MdxPage",name:"question",route:"/xamdev/question"}]},{kind:"Folder",name:"xamdoc",route:"/xamdoc",children:[{kind:"Folder",name:"CXBS",route:"/xamdoc/CXBS",children:[{kind:"Meta",data:{ra:"\uD83C\uDFDB REST Architecture",rk:"\uD83D\uDD11 REST Key",crp:"\uD83D\uDCDD Client Requirements",fr:"\uD83D\uDCDA Resource",ideig:"\uD83D\uDEE0 Installation Guide",dbst:" \uD83D\uDDC4 Database Structure",setup:"⚙️ Setup",uapi:"\uD83D\uDCE1 User API"}},{kind:"MdxPage",name:"crp",route:"/xamdoc/CXBS/crp"},{kind:"MdxPage",name:"dbst",route:"/xamdoc/CXBS/dbst"},{kind:"MdxPage",name:"fr",route:"/xamdoc/CXBS/fr"},{kind:"MdxPage",name:"ideig",route:"/xamdoc/CXBS/ideig"},{kind:"MdxPage",name:"ra",route:"/xamdoc/CXBS/ra"},{kind:"MdxPage",name:"rk",route:"/xamdoc/CXBS/rk"},{kind:"MdxPage",name:"setup",route:"/xamdoc/CXBS/setup"},{kind:"MdxPage",name:"uapi",route:"/xamdoc/CXBS/uapi"}]},{kind:"MdxPage",name:"CXBS",route:"/xamdoc/CXBS"},{kind:"Meta",data:{CXBS:"Backend"}}]},{kind:"MdxPage",name:"xamdoc",route:"/xamdoc",frontMatter:{title:"Developer Space CodeXam"}}],flexsearch:{codeblocks:!1},title:"React7"},pageNextRoute:"/docs/react/react7",nextraLayout:o.ZP,themeConfig:a.Z};function x(e){let s=Object.assign({p:"p",h2:"h2",ul:"ul",li:"li",pre:"pre",code:"code",span:"span",h4:"h4",ol:"ol",h3:"h3"},(0,i.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"flex nx-justify-between",children:(0,r.jsx)("h1",{children:(0,r.jsx)("span",{className:"p-0 sm:p-0 headingGradientTag font-bold text-transparent sm:text-8xl text-[50px] ",children:"Props & PropTypes"})})}),"\n",(0,r.jsx)("div",{className:"mt-5"}),"\n",(0,r.jsx)(d.Z,{type:"info",emoji:"\uD83C\uDF89",title:"Read This on Github",message:"This article is available on Github. You can read it there and contribute to it.",links:[{link:"https://github.com/Subham-Maity/ReactJS-For-Beginners",linkText:"Github Link"},{link:"https://github.com/Subham-Maity/ReactJS-For-Beginners/issues/new",linkText:"Any Issue ?"}]}),"\n",(0,r.jsx)("div",{align:"center",children:(0,r.jsxs)("figure",{className:"mt-4",children:[(0,r.jsx)(l.TV,{toolbarRender:e=>{let{rotate:s,onRotate:n}=e;return(0,r.jsx)(c.Z,{onClick:()=>n(s+90)})},children:(0,r.jsx)(l.HI,{src:"https://github.com/Subham-Maity/ReactJS-For-Beginners/blob/master/React%202022%20(Complete)/05.Creating%20Navbar%20using%20Props%20and%20PropTypes%20(TextUtil%20Project)/longSubham.png?raw=true",alt:"example",children:(0,r.jsx)("img",{className:"bg-purple-900 dark:bg-stone-900",style:{position:"relative",opacity:1,borderRadius:"10px",overflow:"hidden",marginTop:"20px",marginBottom:"20px"},align:"center",src:"https://github.com/Subham-Maity/ReactJS-For-Beginners/blob/master/React%202

1022%20(Complete)/05.Creating%20Navbar%20using%20Props%20and%20PropTypes%20(TextUtil%20Project)/longSubham.png?raw=true",alt:"example"})})}),(0,r.jsx)("figcaption",{children:(0,r.jsx)(s.p,{children:"Change the image size by using the click-and-scroll function."})})]})}),"\n",(0,r.jsx)(s.h2,{id:"-what-is-props-",children:"⭐ What is Props ?"}),"\n",(0,r.jsx)("div",{className:"mt-3"}),"\n",(0,r.jsxs)("div",{className:"cardTexture5",children:[(0,r.jsx)("h1",{style:{padding:"8px"},className:"mb-8 text-center font-bold text-transparent sm:text-4xl text-[25px] tex bg-clip-text bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-sky-700 via-cyan-500 to-neutral-300",align:"middle",children:(0,r.jsx)(s.p,{children:"Explaination"})}),(0,r.jsx)("p",{align:"center",children:(0,r.jsx)("img",{style:{position:"relative",opacity:1,borderRadius:"10px",overflow:"hidden",marginTop:"20px",marginBottom:"20px"},src:"https://github.com/Subham-Maity/ReactJS-For-Beginners/blob/master/React%202023%20(Better)/07.%20Props%20&%20Prop-types/img/1.png?raw=true"})}),(0,r.jsxs)("h11",{className:"textStyle1 ",children:[(0,r.jsx)(s.p,{children:"Props are a way to pass data from a parent component to a child component in React. It's like giving information or values to the child component so that it can display or use them. Think of props as variables that hold some data, and you can pass those variables to another component just like you would pass variables to a function."}),(0,r.jsx)(s.p,{children:"Here are some key points to follow when using props in React:"}),(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Always pass data from parent to child: The parent component should be the one responsible for passing data to the child component using props."}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Make props read-only: Props should be treated as read-only values in the child component. The child should not modify the props that are passed to it."}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Use default props: You can specify default props for a component in case no props are passed to it. This way, the component will have some default values to display or work with."}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Use prop types: You can use prop types to define the expected data type of a prop. This helps to catch errors during development and makes your code easier to understand."}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Avoid using props for complex logic: Props are meant to be used for passing simple data, not complex logic. If you need to perform some complex operations, it's best to use state instead."}),"\n"]}),"\n"]})]})]}),"\n",(0,r.jsx)(s.h2,{id:"-syntax",children:"⭐ Syntax"}),"\n",(0,r.jsx)("div",{className:"mt-3"}),"\n",(0,r.jsxs)("div",{className:"cardTexture5",children:[(0,r.jsx)("h1",{style:{padding:"8px"},className:"mb-8 text-center font-bold text-transparent sm:text-4xl text-[25px] tex bg-clip-text bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-sky-700 via-cyan-500 to-neutral-300",align:"middle",children:(0,r.jsx)(s.p,{children:"Simple Example"})}),(0,r.jsxs)("h11",{className:"textStyle1 ",children:[(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" React "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ChildComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},className:"highlighted",children:"(props)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Hello, {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name}!</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ParentComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"() {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"ChildComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"John Doe"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" />;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,r.jsx)(s.p,{children:'In this example, the ParentComponent is passing a prop name with the value "John Doe" to the ChildComponent. The ChildComponent can access this prop using props.name in its JSX.'}),(0,r.jsx)(s.p,{children:"It's also worth noting that in the ChildComponent you can destructure the props to make it easier to access individual props:"}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ChildComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},className:"highlighted",children:"({ name })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Hello, {name}!</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,r.jsx)(s.h4,{id:"-playground",children:"⚡ Playground"}),(0,r.jsx)("div",{className:"flex justify-between ",children:(0,r.jsx)("iframe",{className:"mt-6 border-sky-200 border-opacity-20 imageBorderNormal",src:"https://stackblitz.com/edit/react-ts-wfq1v5?file=src/components/Student.js",style:{width:"806px",height:"457px",border:0,overflow:"hidden",background:"rgb(21, 21, 21)"},title:"CodeXam",allow:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:"allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"})}),(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Also you can send a props multiple times to a component."}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"text","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"text","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"├── App.js"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"├── src"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"│   ├── components"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"│   │   ├── Student.js"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"│   │   ├── Comp.js"})})]})}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"Student.js",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Comp "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./Comp"'})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (props) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <>"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".age} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Comp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name}/>"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  )"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Student"})]})]})}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"Comp.js",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" React "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react'"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Comp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (props) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <>"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name}</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  )"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Comp;"})]})]})}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"App.js",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./App.css'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Comp "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./components/Comp'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  Student  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'./components/Student'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"() {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"className"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"App"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Student"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"John"'})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"age"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} />"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Comp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  );"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" App;"})]})]})})]})]}),"\n",(0,r.jsx)(s.h2,{id:"-props-types",children:"⭐ Props Types"}),"\n",(0,r.jsx)("div",{className:"mt-3"}),"\n",(0,r.jsxs)("div",{className:"cardTexture5",children:[(0,r.jsx)("h1",{style:{padding:"8px"},className:"mb-8 text-center font-bold text-transparent sm:text-4xl text-[25px] tex bg-clip-text bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-sky-700 via-cyan-500 to-neutral-300",align:"middle",children:(0,r.jsx)(s.p,{children:"Simple Example"})}),(0,r.jsxs)("h11",{className:"textStyle1 ",children:[(0,r.jsx)(s.p,{children:"Prop types are a way to specify the data type of the props that a component expects to receive. They help to catch errors during development by ensuring that the correct type of data is being passed to the component."}),(0,r.jsx)(s.p,{children:"Think of prop types as a way to validate the data that is being passed to a component. If the data that is passed doesn't match the specified prop type, a warning will be displayed in the console to let you know that there's a problem."})]})]}),"\n",(0,r.jsx)(s.h2,{id:"-syntax-1",children:"⭐ Syntax"}),"\n",(0,r.jsx)("div",{className:"mt-3"}),"\n",(0,r.jsxs)("div",{className:"cardTexture5",children:[(0,r.jsx)("h1",{style:{padding:"8px"},className:"mb-8 text-center font-bold text-transparent sm:text-4xl text-[25px] tex bg-clip-text bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-sky-700 via-cyan-500 to-neutral-300",align:"middle",children:(0,r.jsx)(s.p,{children:"How to use"})}),(0,r.jsxs)("h11",{className:"textStyle1 ",children:[(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsx)(s.li,{children:"In the terminal type the following command to install prop-types:"}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"npm install prop"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"types"})]})})}),(0,r.jsxs)(s.ol,{start:"2",children:["\n",(0,r.jsx)(s.li,{children:"Import the prop-types library in the component that you want to use it in:"}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" PropTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"prop-types"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),(0,r.jsxs)(s.ol,{start:"3",children:["\n",(0,r.jsx)(s.li,{children:"Add the prop types to the component:"}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"ComponentName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".propTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".dataType"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),(0,r.jsxs)(s.ol,{start:"4",children:["\n",(0,r.jsx)(s.li,{children:"Add the default props to the component:"}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"ComponentName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".defaultProps "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" defaultValue"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})})]})]}),"\n",(0,r.jsx)(s.h2,{id:"-experiment-props-types",children:"⭐ Experiment Props Types"}),"\n",(0,r.jsx)("div",{className:"mt-3"}),"\n",(0,r.jsxs)("div",{className:"cardTexture5",children:[(0,r.jsx)("h1",{style:{padding:"8px"},className:"mb-8 text-center font-bold text-transparent sm:text-4xl text-[25px] tex bg-clip-text bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-sky-700 via-cyan-500 to-neutral-300",align:"middle",children:(0,r.jsx)(s.p,{children:"How to use"})}),(0,r.jsxs)("h11",{className:"textStyle1 ",children:[(0,r.jsx)(s.pre,{"data-language":"text","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"text","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"├── App.js"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"├── src"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"│   ├── components"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"│   │   ├── Student.js"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"│   │   ├── Comp.js"})})]})}),(0,r.jsx)(s.h3,{id:"️-props-types",children:"▶️ Props Types"}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"Student.js",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Comp "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./Comp"'})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" PropTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"prop-types"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (props) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <>"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".age} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Comp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name}/>"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  )"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".propTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  age"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".number"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",chi

1ldren:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Student"})]})]})}),(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"If you change the data type string to number in the Student.js file then you will get an error in the console."}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"bash","data-theme":"default",filename:"bash",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"bash","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"index.js:75"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Warning:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"Failed"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"prop"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"type:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"Invalid"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"prop"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"of"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"supplied"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"to"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"expected"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"at"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (http://localhost:3001/main.70cb7e2efd57e082bcd4.hot-update.js:29:29)"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"at"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"div"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"at"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"App"})]})]})}),(0,r.jsx)(s.p,{children:"This means that the data type of the prop n

1ame is not a number."}),(0,r.jsx)(s.h3,{id:"️-default-props",children:"▶️ Default Props"}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"Student.js",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Comp "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./Comp"'})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" PropTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"prop-types"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (props) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <>"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".age} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Comp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name}/>"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  )"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".propTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  age"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".number"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".defaultProps "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"John"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  age"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"20"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "})]})}),(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"We can define default values to props using the defaultProps property. defaultProps is used to ensure that props will have a value if it was not specified by the parent component."}),"\n",(0,r.jsx)(s.li,{children:"Example: When you visit a website and fill out a form you will notice that already some values are filled 

1in. This is because the website has defined default values for the props."}),"\n"]}),(0,r.jsx)(s.h3,{id:"️-isrequired",children:"▶️ isRequired"}),(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"isRequired is used to ensure that a prop is passed to a component. If the prop is not passed, a warning will be displayed in the console."}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",filename:"Student.js",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Comp "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./Comp"'})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" PropTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"prop-types"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (props) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <>"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> {"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".age} </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Comp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".name}/>"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  )"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".propTypes "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".isRequired"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  age"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"PropTypes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".isRequired"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".defaultProps "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"John"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  age"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"20"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "})]})}),(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"If you remove the props name and age from the App.js file then you will get an error in the console."}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"bash","data-theme":"default",filename:"bash",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"bash","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"index.js:75"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Warning:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"Failed"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"prop"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"type:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"The"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"prop"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"marked"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"as"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"required"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"in"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"but"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"its"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"undefined"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"at"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"Student"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (http://localhost:3001/main.70cb7e2efd57e082bcd4.hot-update.js:29:29)"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"at"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"div"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"at"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"App"})]})]})})]})]})]})}

1s.default=(0,t.j)(h)},36887:function(){},57953:function(e){e.exports={feature:"style_feature__aEu2F",large:"style_large__nBy_k",centered:"style_centered__rnKNV","light-only":"style_light-only__gsm2h",features:"style_features__rLpsq"}},44637:function(e,s,n){"use strict";n.d(s,{HI:function(){return Y},TV:function(){return L}});var r=n(50959),t=n(10422);function o(){return(o=Object.assign||function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function a(e,s){if(null==e)return{};var n,r,t={},o=Object.keys(e);for(r=0;r<o.length;r++)s.indexOf(n=o[r])>=0||(t[n]=e[n]);return t}function i(e){var s=(0,r.useRef)({fn:e,curr:void 0}).current;if(s.fn=e,!s.curr){var n=Object.create(null);Object.keys(e).forEach(function(e){n[e]=function(){var n;return(n=s.fn[e]).call.apply(n,[s.fn].concat([].slice.call(arguments)))}}),s.curr=n}return s.curr}function l(e){return(0,r.useReducer)(function(e,s){return o({},e,"function"==typeof s?s(e):s)},e)}var c=(0,r.createContext)(void 0),d="undefined"!=typeof window&&"ontouchstart"in window,h=function(e,s,n){return Math.max(Math.min(e,n),s)},x=function(e,s,n){return void 0===s&&(s=0),void 0===n&&(n=0),h(e,1*(1-n),Math.max(6,s)*(1+n))},p="undefined"==typeof window||/ServerSideRendering/.test(navigator&&navigator.userAgent)?r.useEffect:r.useLayoutEffect;function k(e,s,n){var t=(0,r.useRef)(s);t.current=s,(0,r.useEffect)(function(){function s(e){t.current(e)}return e&&window.addEventListener(e,s,n),function(){e&&window.removeEventListener(e,s)}},[e])}var u=["container"];function j(e){var s=e.container,n=void 0===s?document.body:s,i=a(e,u);return(0,t.createPortal)(r.createElement("div",o({},i)),n)}function m(e){return r.createElement("svg",o({width:"44",height:"44",viewBox:"0 0 768 768"},e),r.createElement("path",{d:"M607.5 205.5l-178.5 178.5 178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"}))}function y(e){return r.createElement("svg",o({width:"44",height:"44",viewBox:"0 0 768 768"},e),r.createElement("path",{d:"M640.5 352.5v63h-390l178.5 180-45 45-256.5-256.5 256.5-256.5 45 45-178.5 180h390z"}))}function g(e){return r.createElement("svg",o({width:"44",height:"44",viewBox:"0 0 768 768"},e),r.createElement("path",{d:"M384 127.5l256.5 256.5-256.5 256.5-45-45 178.5-180h-390v-63h390l-178.5-180z"}))}function v(){return(0,r.useEffect)(function(){var e=document.body.style,s=e.overflow;return e.overflow="hidden",function(){e.overflow=s}},[]),null}function f(e){var s=e.touches[0],n=s.clientX,r=s.clientY;if(e.touches.length>=2){var t=e.touches[1],o=t.clientX,a=t.clientY;return[(n+o)/2,(r+a)/2,Math.sqrt(Math.pow(o-n,2)+Math.pow(a-r,2))]}return[n,r,0]}var w=function(e,s,n,r){var t=n*s,o=(t-r)/2,a=void 0,i=e;return t<=r?(a=1,i=0):e>0&&o-e<=0?(a=2,i=o):e<0&&o+e<=0&&(a=3,i=-o),[a,i]};function b(e,s,n,r,t,o,a,i,l,c){void 0===a&&(a=innerWidth/2),void 0===i&&(i=innerHeight/2),void 0===l&&(l=0),void 0===c&&(c=0);var d=w(e,o,n,innerWidth)[0],h=w(s,o,r,innerHeight),x=innerWidth/2,p=innerHeight/2;return{x:a-o/t*(a-(x+e))-x+(r/n>=3&&n*o===innerWidth?0:d?l/2:l),y:i-o/t*(i-(p+s))-p+(h[0]?c/2:c),lastCX:a,lastCY:i}}function P(e,s,n){var r=e%180!=0;return r?[n,s,r]:[s,n,r]}function M(e,s,n){var r=P(n,innerWidth,innerHeight),t=r[0],o=r[1],a=0,i=t,l=o,c=e/s*o,d=s/e*t;return e<t&&s<o?(i=e,l=s):e<t&&s>=o?i=c:e>=t&&s<o||e/s>t/o?l=d:s/e>=3&&!r[2]?a=((l=d)-o)/2:i=c,{width:i,height:l,x:0,y:a,pause:!0}}function N(e,s){var n=s.leading,t=void 0!==n&&n,o=s.maxWait,a=s.wait,i=void 0===a?o||0:a,l=(0,r.useRef)(e);l.current=e;var c=(0,r.useRef)(0),d=(0,r.useRef)(),h=function(){return d.current&&clearTimeout(d.current)},x=(0,r.useCallback)(function(){var e=[].slice.call(arguments),s=Date.now();function n(){c.current=s,h(),l.current.apply(null,e)}var r=c.current,a=s-r;if(0===r&&(t&&n(),c.current=s),void 0!==o){if(a>o)return void n()}else a<i&&(c.current=s);h(),d.current=setTimeout(function(){n(),c.current=0},i)},[i,o,t]);return x.cancel=h,x}var C=function(e,s,n){return T(e,s,n,100,function(e){return e},function(){return T(s,e,n)})},S=function(e){return 1-Math.pow(1-e,4)};function T(e,s,n,r,t,o){void 0===r&&(r=400),void 0===t&&(t=S);var a=s-e;if(0!==a){var i=Date.now(),l=0,c=function(){var s=Math.min(1,(Date.now()-i)/r);n(e+t(s)*a)&&s<1?d():(cancelAnimationFrame(l),s>=1&&o&&o())};d()}function d(){l=requestAnimationFrame(c)}}var D={T:0,L:0,W:0,H:0,FIT:void 0},R=function(){var e=(0,r.useRef)(!1);return(0,r.useEffect)(function(){return e.current=!0,function(){e.current=!1}},[]),e},E=["className"];function F(e){var s=e.className,n=a(e,E);return r.createElement("div",o({className:"PhotoView__Spinner "+s},n),r.createElement("svg",{viewBox:"0 0 32 32",width:"36",height:"36",fill:"white"},r.createElement("path",{opacity:".25",d:"M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"}),r.createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}var A=["src","loaded","broken","className","onPhotoLoad","loadingElement","brokenElement"];function _(e){var s=e.src,n=e.loaded,t=e.broken,i=e.className,l=e.onPhotoLoad,c=e.loadingElement,d=e.brokenElement,h=a(e,A),x=R();return s&&!t?r.createElement(r.Fragment,null,r.createElement("img",o({className:"PhotoView__Photo"+(i?" "+i:""),src:s,onLoad:function(e){var s=e.target;

1x.current&&l({loaded:!0,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight})},onError:function(){x.current&&l({broken:!0})},alt:""},h)),!n&&(r.createElement("span",{className:"PhotoView__icon"},c)||r.createElement(F,{className:"PhotoView__icon"}))):d?r.createElement("span",{className:"PhotoView__icon"},"function"==typeof d?d({src:s}):d):null}var X={naturalWidth:void 0,naturalHeight:void 0,width:void 0,height:void 0,loaded:void 0,broken:!1,x:0,y:0,touched:!1,maskTouched:!1,rotate:0,scale:1,CX:0,CY:0,lastX:0,lastY:0,lastCX:0,lastCY:0,lastScale:1,touchTime:0,touchLength:0,pause:!0,stopRaf:!0,reach:void 0};function I(e){var s,n,t,a,c,h,u,j,m,y,g,v,S,E,F,A,I,B,W,H,O,L,Y,V,q,J,U,G,z=e.item,Z=z.src,Q=z.render,K=z.width,$=void 0===K?0:K,ee=z.height,es=void 0===ee?0:ee,en=z.originRef,er=e.visible,et=e.speed,eo=e.easing,ea=e.wrapClassName,ei=e.className,el=e.style,ec=e.loadingElement,ed=e.brokenElement,eh=e.onPhotoTap,ex=e.onMaskTap,ep=e.onReachMove,ek=e.onReachUp,eu=e.onPhotoResize,ej=e.isActive,em=e.expose,ey=l(X),eg=ey[0],ev=ey[1],ef=(0,r.useRef)(0),ew=R(),eb=eg.naturalWidth,eP=void 0===eb?$:eb,eM=eg.naturalHeight,eN=void 0===eM?es:eM,eC=eg.width,eS=void 0===eC?$:eC,eT=eg.height,eD=void 0===eT?es:eT,eR=eg.loaded,eE=void 0===eR?!Z:eR,eF=eg.broken,eA=eg.x,e_=eg.y,eX=eg.touched,eI=eg.stopRaf,eB=eg.maskTouched,eW=eg.rotate,eH=eg.scale,eO=eg.CX,eL=eg.CY,eY=eg.lastX,eV=eg.lastY,eq=eg.lastCX,eJ=eg.lastCY,eU=eg.lastScale,eG=eg.touchTime,ez=eg.touchLength,eZ=eg.pause,eQ=eg.reach,eK=i({onScale:function(e){return e$(x(e))},onRotate:function(e){eW!==e&&(em({rotate:e}),ev(o({rotate:e},M(eP,eN,e))))}});function e$(e,s,n){eH!==e&&(em({scale:e}),ev(o({scale:e},b(eA,e_,eS,eD,eH,e,s,n),e<=1&&{x:0,y:0})))}var e0=N(function(e,s,n){if(void 0===n&&(n=0),(eX||eB)&&ej){var r=P(eW,eS,eD),t=r[0],a=r[1];if(0===n&&0===ef.current){var i=20>=Math.abs(e-eO),l=20>=Math.abs(s-eL);if(i&&l)return void ev({lastCX:e,lastCY:s});ef.current=i?s>eL?3:2:1}var c=e-eq,d=s-eJ,h=void 0;if(0===n){var p,k,u=w(c+eY,eH,t,innerWidth)[0],j=w(d+eV,eH,a,innerHeight);p=ef.current,k=j[0],void 0!==(h=u&&1===p||"x"===eQ?"x":k&&p>1||"y"===eQ?"y":void 0)&&ep(h,e,s,eH)}if("x"===h||eB)return void ev({reach:"x"});var m=x(eH+(n-ez)/100/2*eH,eP/eS,.2);em({scale:m}),ev(o({touchLength:n,reach:h,scale:m},b(eA,e_,eS,eD,eH,m,e,s,c,d)))}},{maxWait:8});function e1(e){return!eI&&!eX&&(ew.current&&ev(o({},e,{pause:er})),ew.current)}var e2,e5,e3,e4,e8=(e4=i({X:function(e){return e1({x:e})},Y:function(e){return e1({y:e})},S:function(e){return ew.current&&(em({scale:e}),ev({scale:e})),!eX&&ew.current}}),function(e,s,n,r,t,o,a,i,l,c,d){var h=P(c,t,o),x=h[0],p=h[1],k=w(e,i,x,innerWidth),u=k[0],j=k[1],m=w(s,i,p,innerHeight),y=m[0],g=m[1],v=Date.now()-d;if(v>=200||i!=a||Math.abs(l-a)>1){var f=b(e,s,t,o,a,i),M=f.x,N=f.y,S=u?j:M!==e?M:null,D=y?g:N!==s?N:null;return null!==S&&T(e,S,e4.X),null!==D&&T(s,D,e4.Y),void(i!=a&&T(a,i,e4.S))}var R=(e-n)/v,E=(s-r)/v,F=Math.sqrt(Math.pow(R,2)+Math.pow(E,2)),A=!1,_=!1;!function(e,s){var n=e,r=0,t=void 0,o=0,a=function(o){t||(t=o);var a=o-t,c=Math.sign(e),d=-.001*c,h=Math.sign(-n)*Math.pow(n,2)*2e-4;r+=n*a+(d+h)*Math.pow(a,2)/2,t=o,c*(n+=(d+h)*a)<=0?l():s(r)?i():l()};function i(){o=requestAnimationFrame(a)}function l(){cancelAnimationFrame(o)}i()}(F,function(n){var r=e+n*(R/F),t=s+n*(E/F),o=w(r,a,x,innerWidth),i=o[0],l=o[1],c=w(t,a,p,innerHeight),d=c[0],h=c[1];if(i&&!A&&(A=!0,u?T(r,l,e4.X):C(l,r+(r-l),e4.X)),d&&!_&&(_=!0,y?T(t,h,e4.Y):C(h,t+(t-h),e4.Y)),A&&_)return!1;var k=A||e4.X(l),j=_||e4.Y(h);return k&&j})}),e6=(e2=function(e,s){eQ||e$(1!==eH?1:Math.max(2,eP/eS),e,s)},e5=(0,r.useRef)(0),e3=N(function(){e5.current=0,eh.apply(void 0,[].slice.call(arguments))},{wait:300}),function(){var e=[].slice.call(arguments);e5.current+=1,e3.apply(void 0,e),e5.current>=2&&(e3.cancel(),e5.current=0,e2.apply(void 0,e))});function e7(e,s){if(ef.current=0,(eX||eB)&&ej){ev({touched:!1,maskTouched:!1,pause:!1,stopRaf:!1,reach:void 0});var n=x(eH,eP/eS);if(e8(eA,e_,eY,eV,eS,eD,eH,n,eU,eW,eG),ek(e,s),eO===e&&eL===s){if(eX)return void e6(e,s);eB&&ex(e,s)}}}function e9(e,s,n){void 0===n&&(n=0),ev({touched:!0,CX:e,CY:s,lastCX:e,lastCY:s,lastX:eA,lastY:e_,lastScale:eH,touchLength:n,touchTime:Date.now()})}function se(e){ev({maskTouched:!0,CX:e.clientX,CY:e.clientY,lastX:eA,lastY:e_})}k(d?void 0:"mousemove",function(e){e.preventDefault(),e0(e.clientX,e.clientY)}),k(d?void 0:"mouseup",function(e){e7(e.clientX,e.clientY)}),k(d?"touchmove":void 0,function(e){e.preventDefault();var s=f(e);e0.apply(void 0,s)},{passive:!1}),k(d?"touchend":void 0,function(e){var s=e.changedTouches[0];e7(s.clientX,s.clientY)},{passive:!1}),k("resize",N(function(){eE&&!eX&&(ev(M(eP,eN,eW)),eu())},{maxWait:8})),p(function(){ej&&em(o({scale:eH,rotate:eW},eK))},[ej]);var ss=(m=function(e){return ev({pause:e})},y=(0,r.useRef)(!1),S=(v=(g=l({lead:!0,scale:eH}))[0]).lead,E=v.scale,F=g[1],A=N(function(e){try{return m(!0),F({lead:!1,scale:e}),Promise.resolve()}catch(e){return Promise.reject(e)}},{wait:et}),p(function(){y.current?(m(!1),F({lead:!0}),A(eH)):y.current=!0},[eH]),B=(I=S?[eS*E,eD*E,eH/E]:[eS*eH,eD*eH,1])[0],W=I[1],H=I[2],n=(s=(0,r.useState)(D))[0],t=s[1],c=(a=(0,r.useState)(0))[0],h=a[1],u=(0,r.useRef)(),j=i({OK:function(){return er&&h(4)}}),(0,r.useEffect)(function(){if(u.current||(u.current=Date.now()),eE){if(function(e,s){var n=e&&e.current;if(n&&1===n.nodeType){var r=n.getBoundingClientRect();s({T:r.top,L:r.left,W:r.width,H:r.height,FIT:"IMG"===n.tagName?getComputedStyle(n).objectFit:void 0})}}(en,t),er)return Date.now()-u.current<250?(h(1),requestAnimationFrame(function(){h(2),requestAnimationFrame(function(){m(!1),h(3)})}),void setTimeout(j.OK,et)):void h(4);

1m(!1),h(5)}},[er,eE]),L=(O=[c,n])[0],V=(Y=O[1]).W,q=Y.FIT,J=innerWidth/2,U=innerHeight/2,[(G=L<3||L>4)?V?Y.L:J:eA+(J-eS*eH/2),G?V?Y.T:U:e_+(U-eD*eH/2),B,G&&q?B*(Y.H/V):W,0===L?H:G?V/(eS*eH)||.01:H,G?q?1:0:1,L,q]),sn=ss[4],sr=ss[6],st="transform "+et+"ms "+eo,so={className:ei,onMouseDown:d?void 0:function(e){e.stopPropagation(),0===e.button&&e9(e.clientX,e.clientY,0)},onTouchStart:d?function(e){e.stopPropagation(),e9.apply(void 0,f(e))}:void 0,onWheel:function(e){if(!eQ){var s=x(eH-e.deltaY/100/2,eP/eS);ev({stopRaf:!0}),e$(s,e.clientX,e.clientY)}},style:{width:ss[2],height:ss[3],opacity:ss[5],objectFit:4===sr?void 0:ss[7],transform:eW?"rotate("+eW+"deg)":void 0,transition:sr>2?st+", opacity "+et+"ms ease, height "+(sr<4?et/2:sr>4?et:0)+"ms "+eo:void 0}};return r.createElement("div",{className:"PhotoView__PhotoWrap"+(ea?" "+ea:""),style:el,onMouseDown:!d&&ej?se:void 0,onTouchStart:d&&ej?function(e){return se(e.touches[0])}:void 0},r.createElement("div",{className:"PhotoView__PhotoBox",style:{transform:"matrix("+sn+", 0, 0, "+sn+", "+ss[0]+", "+ss[1]+")",transition:eX||eZ?void 0:st,willChange:ej?"transform":void 0}},Z?r.createElement(_,o({src:Z,loaded:eE,broken:eF},so,{onPhotoLoad:function(e){ev(o({},e,e.loaded&&M(e.naturalWidth||0,e.naturalHeight||0,eW)))},loadingElement:ec,brokenElement:ed})):Q&&Q({attrs:so,scale:sn,rotate:eW})))}var B={x:0,touched:!1,pause:!1,lastCX:void 0,lastCY:void 0,bg:void 0,lastBg:void 0,overlay:!0,minimal:!0,scale:1,rotate:0};function W(e){var s,n,t,o,a=e.loop,c=void 0===a?3:a,x=e.speed,u=e.easing,f=e.photoClosable,w=e.maskClosable,b=void 0===w||w,P=e.maskOpacity,M=void 0===P?1:P,N=e.pullClosable,C=void 0===N||N,S=e.bannerVisible,T=void 0===S||S,D=e.overlayRender,R=e.toolbarRender,E=e.className,F=e.maskClassName,A=e.photoClassName,_=e.photoWrapClassName,X=e.loadingElement,W=e.brokenElement,H=e.images,O=e.index,L=e.onIndexChange,Y=e.visible,V=e.onClose,q=e.afterClose,J=e.portalContainer,U=l(B),G=U[0],z=U[1],Z=(0,r.useState)(0),Q=Z[0],K=Z[1],$=G.x,ee=G.touched,es=G.pause,en=G.lastCX,er=G.lastCY,et=G.bg,eo=void 0===et?M:et,ea=G.lastBg,ei=G.overlay,el=G.minimal,ec=G.scale,ed=G.rotate,eh=G.onScale,ex=G.onRotate,ep=e.hasOwnProperty("index"),ek=ep?void 0===O?0:O:Q,eu=ep?L:K,ej=(0,r.useRef)(ek),em=H.length,ey=H[ek],eg="boolean"==typeof c?c:em>c,ev=(s=(0,r.useReducer)(function(e){return!e},!1)[1],n=(0,r.useRef)(0),o=(t=function(e,s){var t=(0,r.useRef)(e);function o(e){t.current=e}return(0,r.useMemo)(function(){Y?(o(Y),n.current=1):n.current=2},[e]),[t.current,o]}(Y))[1],[t[0],n.current,function(){s(),2===n.current&&(o(!1),q&&q()),n.current=0}]),ef=ev[0],ew=ev[1],eb=ev[2];p(function(){if(ef)return z({pause:!0,x:-(ek*(innerWidth+20))}),void(ej.current=ek);z(B)},[ef]);var eP=i({close:function(e){ex&&ex(0),z({overlay:!0,lastBg:eo}),V(e)},changeIndex:function(e,s){void 0===s&&(s=!1);var n=eg?ej.current+(e-ek):e,r=em-1,t=h(n,0,r),o=eg?n:t;z({touched:!1,lastCX:void 0,lastCY:void 0,x:-(innerWidth+20)*o,pause:s}),ej.current=o,eu&&eu(eg?e<0?r:e>r?0:e:t)}}),eM=eP.close,eN=eP.changeIndex;function eC(e){return e?eM():z({overlay:!ei})}function eS(){z({x:-(innerWidth+20)*ek,lastCX:void 0,lastCY:void 0,pause:!0}),ej.current=ek}function eT(e,s,n,r){"x"===e?function(e){if(void 0!==en){var s=e-en,n=s;!eg&&(0===ek&&s>0||ek===em-1&&s<0)&&(n=s/2),z({touched:!0,lastCX:en,x:-(innerWidth+20)*ej.current+n,pause:!1})}else z({touched:!0,lastCX:e,x:$,pause:!1})}(s):"y"===e&&function(e,s){if(void 0!==er){var n=null===M?null:h(M,.01,M-Math.abs(e-er)/100/4);z({touched:!0,lastCY:er,bg:1===s?n:M,minimal:1===s})}else z({touched:!0,lastCY:e,bg:eo,minimal:!0})}(n,r)}function eD(e,s){var n=e-(null!=en?en:e),r=!1;if(n<-40)eN(ek+1);else if(n>40)eN(ek-1);else{var t=-(innerWidth+20)*ej.current;Math.abs(s-(null!=er?er:s))>100&&el&&C&&(r=!0,eM()),z({touched:!1,x:t,lastCX:void 0,lastCY:void 0,bg:M,overlay:!!r||ei})}}k("keydown",function(e){if(Y)switch(e.key){case"ArrowLeft":eN(ek-1,!0);break;case"ArrowRight":eN(ek+1,!0);break;case"Escape":eM()}});var eR=(0,r.useMemo)(function(){var e=H.length;

1return eg?H.concat(H).concat(H).slice(e+ek-1,e+ek+2):H.slice(Math.max(ek-1,0),Math.min(ek+2,e+1))},[H,ek,eg]);if(!ef)return null;var eE=ei&&!ew,eF=Y?eo:ea,eA=eh&&ex&&{images:H,index:ek,visible:Y,onClose:eM,onIndexChange:eN,overlayVisible:eE,overlay:ey&&ey.overlay,scale:ec,rotate:ed,onScale:eh,onRotate:ex},e_=x?x(ew):400,eX=u?u(ew):"cubic-bezier(0.25, 0.8, 0.25, 1)",eI=x?x(3):600,eB=u?u(3):"cubic-bezier(0.25, 0.8, 0.25, 1)";return r.createElement(j,{className:"PhotoView-Portal"+(eE?"":" PhotoView-Slider__clean")+(Y?"":" PhotoView-Slider__willClose")+(E?" "+E:""),role:"dialog",onClick:function(e){return e.stopPropagation()},container:J},Y&&r.createElement(v,null),r.createElement("div",{className:"PhotoView-Slider__Backdrop"+(F?" "+F:"")+(1===ew?" PhotoView-Slider__fadeIn":2===ew?" PhotoView-Slider__fadeOut":""),style:{background:eF?"rgba(0, 0, 0, "+eF+")":void 0,transitionTimingFunction:eX,transitionDuration:(ee?0:e_)+"ms",animationDuration:e_+"ms"},onAnimationEnd:eb}),T&&r.createElement("div",{className:"PhotoView-Slider__BannerWrap"},r.createElement("div",{className:"PhotoView-Slider__Counter"},ek+1," / ",em),r.createElement("div",{className:"PhotoView-Slider__BannerRight"},R&&eA&&R(eA),r.createElement(m,{className:"PhotoView-Slider__toolbarIcon",onClick:eM}))),eR.map(function(e,s){var n=eg||0!==ek?ej.current-1+s:ek+s;return r.createElement(I,{key:eg?e.key+"/"+e.src+"/"+n:e.key,item:e,speed:e_,easing:eX,visible:Y,onReachMove:eT,onReachUp:eD,onPhotoTap:function(){return eC(f)},onMaskTap:function(){return eC(b)},wrapClassName:_,className:A,style:{left:(innerWidth+20)*n+"px",transform:"translate3d("+$+"px, 0px, 0)",transition:ee||es?void 0:"transform "+eI+"ms "+eB},loadingElement:X,brokenElement:W,onPhotoResize:eS,isActive:(ey&&ey.key)===e.key,expose:z})}),!d&&T&&r.createElement(r.Fragment,null,(eg||0!==ek)&&r.createElement("div",{className:"PhotoView-Slider__ArrowLeft",onClick:function(){return eN(ek-1,!0)}},r.createElement(y,null)),(eg||ek+1<em)&&r.createElement("div",{className:"PhotoView-Slider__ArrowRight",onClick:function(){return eN(ek+1,!0)}},r.createElement(g,null))),D&&eA&&r.createElement("div",{className:"PhotoView-Slider__Overlay"},D(eA)))}var H=["children","onIndexChange","onVisibleChange"],O={images:[],visible:!1,index:0};function L(e){var s=e.children,n=e.onIndexChange,t=e.onVisibleChange,d=a(e,H),h=l(O),x=h[0],p=h[1],k=(0,r.useRef)(0),u=x.images,j=x.visible,m=x.index,y=i({nextId:function(){return k.current+=1},update:function(e){var s=u.findIndex(function(s){return s.key===e.key});if(s>-1){var n=u.slice();return n.splice(s,1,e),void p({images:n})}p(function(s){return{images:s.images.concat(e)}})},remove:function(e){p(function(s){var n=s.images.filter(function(s){return s.key!==e});return{images:n,index:Math.min(n.length-1,m)}})},show:function(e){var s=u.findIndex(function(s){return s.key===e});p({visible:!0,index:s}),t&&t(!0,s,x)}}),g=i({close:function(){p({visible:!1}),t&&t(!1,m,x)},changeIndex:function(e){p({index:e}),n&&n(e,x)}}),v=(0,r.useMemo)(function(){return o({},x,y)},[x,y]);return r.createElement(c.Provider,{value:v},s,r.createElement(W,o({images:u,visible:j,index:m,onIndexChange:g.changeIndex,onClose:g.close},d)))}var Y=function(e){var s,n=e.src,t=e.render,a=e.overlay,l=e.width,d=e.height,h=e.triggers,x=void 0===h?["onClick"]:h,p=e.children,k=(0,r.useContext)(c),u=((s=(0,r.useRef)({sign:!1,fn:void 0}).current).sign||(s.sign=!0,s.fn=k.nextId()),s.fn),j=(0,r.useRef)(null);(0,r.useEffect)(function(){return function(){k.remove(u)}},[]);var m=i({render:function(e){return t&&t(e)},show:function(e,s){k.show(u),function(e,s){if(p){var n=p.props[e];n&&n(s)}}(e,s)}}),y=(0,r.useMemo)(function(){var e={};return x.forEach(function(s){e[s]=m.show.bind(null,s)}),e},[]);return(0,r.useEffect)(function(){k.update({key:u,src:n,originRef:j,render:m.render,overlay:a,width:l,height:d})},[n]),p?r.Children.only((0,r.cloneElement)(p,o({},y,{ref:j}))):null}}},function(e){e.O(0,[1791,3159,4291,9774,2888,179],function(){return e(e.s=2968)}),_N_E=e.O()}]);