{"id":3948,"date":"2022-03-21T09:29:59","date_gmt":"2022-03-21T09:29:59","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=3948"},"modified":"2022-03-21T09:29:59","modified_gmt":"2022-03-21T09:29:59","slug":"what-is-the-purpose-of-using-super-constructor-with-props-argument","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/","title":{"rendered":"What is the purpose of using super constructor with props argument ?"},"content":{"rendered":"<ul>\n<li style=\"text-align: justify;\">This method has been known as, a child class constructor cannot create use of this reference until <strong>super()<\/strong> .<\/li>\n<li style=\"text-align: justify;\">The same applies for ES6 sub-classes as well.<\/li>\n<li style=\"text-align: justify;\">The main reason of passing props parameter to\u00a0<strong>super()<\/strong> call is to access <strong>this.props<\/strong> in your child constructors.<\/li>\n<li style=\"text-align: justify;\">The <strong>super()<\/strong> is a requirement, while implementing the\u00a0<strong>constructor()<\/strong>\u00a0function\u00a0inside a React component.<\/li>\n<li style=\"text-align: justify;\">For example,\u00a0<strong>super(props)<\/strong> would call the React.<\/li>\n<li style=\"text-align: justify;\">Component constructor passing in props as the argument.<\/li>\n<\/ul>\n<h4 id=\"for-example-in-passing-props\">For example in <strong>Passing props<\/strong><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">class MyComponent extends React.Component {<br\/>  constructor(props) {<br\/>    super(props)<br\/><br\/>    console.log(this.props) \/\/ prints { name: &#039;bharath&#039;, age: 23}<br\/>  }<br\/>}<\/code><\/pre> <\/div>\n<p>\u00a0<\/p>\n<h4 id=\"for-example-in-not-passing-props\">For example in <strong>Not passing props<\/strong><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">class MyComponent extends React.Component {<br\/>  constructor(props) {<br\/>    super()<br\/><br\/>    console.log(this.props) \/\/ prints undefined<br\/><br\/>    \/\/ but props parameter is still available<br\/>    console.log(props) \/\/ prints { name: &#039; bharath &#039;, age: 23 }<br\/>  }<br\/><br\/>  render() {<br\/>    \/\/ no difference outside constructor<br\/>    console.log(this.props) \/\/ prints { name: &#039; bharath &#039;, age: 23 }<br\/>  }<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>In The above code snippets shows that <strong>this.props<\/strong> is different only within the constructor.<\/li>\n<li>It would be the same outside the constructor.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This method has been known as, a child class constructor cannot create use of this reference until super() . The same applies for ES6 sub-classes as well. The main reason of passing props parameter to\u00a0super() call is to access this.props in your child constructors. The super() is a requirement, while implementing the\u00a0constructor()\u00a0function\u00a0inside a React component. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16542],"tags":[16554,16561,16560,16562,16557,16555,16559,16563,16552,16553,16564,16565,16556,16558],"class_list":["post-3948","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-superprops-in-react","tag-superprops-in-functional-component","tag-superprops-react","tag-what-is-constructor-in-react","tag-what-is-constructorprops-in-react","tag-what-is-super-in-react-constructor","tag-what-is-superprops","tag-what-is-the-purpose-of-using-super-constructor-with-props-argument","tag-whats-the-difference-between-super-and-superprops-in-react","tag-why-do-we-write-superprops","tag-why-use-super-in-constructor-javascript","tag-why-use-super-in-constructor-react","tag-why-we-pass-props-in-constructor","tag-why-we-use-constructor-and-super-in-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is the purpose of using super constructor with props argument ?<\/title>\n<meta name=\"description\" content=\"What is the purpose of using super constructor with props argument ? - This method has been known as, a child class constructor cannot create...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the purpose of using super constructor with props argument ?\" \/>\n<meta property=\"og:description\" content=\"What is the purpose of using super constructor with props argument ? - This method has been known as, a child class constructor cannot create...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T09:29:59+00:00\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/\"},\"author\":{\"name\":\"webmaster\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"headline\":\"What is the purpose of using super constructor with props argument ?\",\"datePublished\":\"2022-03-21T09:29:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/\"},\"wordCount\":253,\"commentCount\":0,\"keywords\":[\"super(props) in React\",\"superprops in functional component\",\"superprops react\",\"what is constructor in react\",\"what is constructorprops in react\",\"what is super in react constructor\",\"what is superprops\",\"what is the purpose of using super constructor with props argument\",\"What's the difference between super() and super(props) in React\",\"Why Do We Write super(props)?\",\"why use super in constructor javascript\",\"why use super in constructor react\",\"why we pass props in constructor\",\"why we use constructor and super in react js\"],\"articleSection\":[\"ReactJS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/\",\"name\":\"What is the purpose of using super constructor with props argument ?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\"},\"datePublished\":\"2022-03-21T09:29:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"What is the purpose of using super constructor with props argument ? - This method has been known as, a child class constructor cannot create...\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-the-purpose-of-using-super-constructor-with-props-argument\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\"],\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/author\\\/webmaster\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is the purpose of using super constructor with props argument ?","description":"What is the purpose of using super constructor with props argument ? - This method has been known as, a child class constructor cannot create...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/","og_locale":"en_US","og_type":"article","og_title":"What is the purpose of using super constructor with props argument ?","og_description":"What is the purpose of using super constructor with props argument ? - This method has been known as, a child class constructor cannot create...","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/","og_site_name":"Wikitechy","article_published_time":"2022-03-21T09:29:59+00:00","author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/#article","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/"},"author":{"name":"webmaster","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"headline":"What is the purpose of using super constructor with props argument ?","datePublished":"2022-03-21T09:29:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/"},"wordCount":253,"commentCount":0,"keywords":["super(props) in React","superprops in functional component","superprops react","what is constructor in react","what is constructorprops in react","what is super in react constructor","what is superprops","what is the purpose of using super constructor with props argument","What's the difference between super() and super(props) in React","Why Do We Write super(props)?","why use super in constructor javascript","why use super in constructor react","why we pass props in constructor","why we use constructor and super in react js"],"articleSection":["ReactJS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/","name":"What is the purpose of using super constructor with props argument ?","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"datePublished":"2022-03-21T09:29:59+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"What is the purpose of using super constructor with props argument ? - This method has been known as, a child class constructor cannot create...","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-the-purpose-of-using-super-constructor-with-props-argument\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=3948"}],"version-history":[{"count":1,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3948\/revisions"}],"predecessor-version":[{"id":3949,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3948\/revisions\/3949"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=3948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=3948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=3948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}