{"id":5046,"date":"2021-09-28T04:43:30","date_gmt":"2021-09-28T04:43:30","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5046"},"modified":"2021-09-28T05:29:34","modified_gmt":"2021-09-28T05:29:34","slug":"functional-component-and-class-component-in-react","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/","title":{"rendered":"Functional component and Class component in React"},"content":{"rendered":"

In react-native, there are two types of components such as functional and class components. In this article, I will explain what is the difference between these two and why we use them. <\/p>\n

Functional component:<\/h2>\n

A functional component is a plain javascript function that returns a jsx
\nimport React from \"react\";
\nconst FunctionalComponent = () => {
\n return <h1>Hello, world<\/h1>;
\n};<\/code>
\nYou can also use this as follows:
\nimport React from \"react\";
\nconst FunctionalComponent(){
\n return <h1>Hello, world<\/h1>;
\n};<\/code><\/p>\n

How to pass props in functional components:<\/h3>\n

For example, we need to pass the name Shilpa to the component.
\n<Component name=\"Shilpa\" \/>
\nconst FunctionalComponent = ({ name }) => {
\n return <h1>Hello, {name}<\/h1>;
\n};<\/code><\/p>\n

In the above example, we are passing props as an argument of the functional component. We have used the destructuring method<\/a>. We can also use the following method without destructuring the data:
\nconst FunctionalComponent = (props) => {
\nreturn <h1>Hello, {props.name}<\/h1>;
\n};
\n\/\/In this we need to use props.name to show<\/em><\/code><\/p>\n

Class Component:<\/h3>\n

A JavaScript class that extends React.Component and includes a render function is referred to as a class component. So to define a class component, you must create a class that extends React.Component. The rendered JSX will be returned by the render() function.
\nimport React from \"react\";
\nclass ClassComponent extends React.Component {
\n render() {
\n return <h1>Hello, world<\/h1>;
\n }
\n}<\/code><\/p>\n

How to pass props in the class component:<\/h3>\n

class ClassComponent extends React.Component {
\n render() {
\n const { name } = this.props;
\nreturn <h1>Hello, { name }<\/h1>;
\n}
\n}<\/code><\/p>\n

In the above example, we need to use this with props as we are using the class component.<\/p>\n

A functional component is written shorter and simpler, as seen in the examples, making it easier to design, comprehend, and test. With so many applications, class components might be confusing. Using functional components might help you prevent a mess and keep everything tidy.<\/p>\n

People having good knowledge of Financial accounting can get an Accounting Certification Exams<\/a> from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

In react-native, there are two types of components such as functional and class components. In this article, I will explain<\/p>\n","protected":false},"author":1,"featured_media":5047,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[717,347],"acf":[],"yoast_head":"\nFunctional component and Class component in React - SS Blog<\/title>\n<meta name=\"description\" content=\"In react-native, there are two types of components such as functional and class components. We will discuss the difference between these two.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Functional component and Class component in React - SS Blog\" \/>\n<meta property=\"og:description\" content=\"In react-native, there are two types of components such as functional and class components. We will discuss the difference between these two.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-28T04:43:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-28T05:29:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/09\/React.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Functional component and Class component in React\",\"datePublished\":\"2021-09-28T04:43:30+00:00\",\"dateModified\":\"2021-09-28T05:29:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\"},\"wordCount\":283,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Component\",\"React\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\",\"url\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\",\"name\":\"Functional component and Class component in React - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-09-28T04:43:30+00:00\",\"dateModified\":\"2021-09-28T05:29:34+00:00\",\"description\":\"In react-native, there are two types of components such as functional and class components. We will discuss the difference between these two.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Functional component and Class component in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Functional component and Class component in React - SS Blog","description":"In react-native, there are two types of components such as functional and class components. We will discuss the difference between these two.","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:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/","og_locale":"en_US","og_type":"article","og_title":"Functional component and Class component in React - SS Blog","og_description":"In react-native, there are two types of components such as functional and class components. We will discuss the difference between these two.","og_url":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-09-28T04:43:30+00:00","article_modified_time":"2021-09-28T05:29:34+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/09\/React.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Functional component and Class component in React","datePublished":"2021-09-28T04:43:30+00:00","dateModified":"2021-09-28T05:29:34+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/"},"wordCount":283,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Component","React"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/","url":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/","name":"Functional component and Class component in React - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-09-28T04:43:30+00:00","dateModified":"2021-09-28T05:29:34+00:00","description":"In react-native, there are two types of components such as functional and class components. We will discuss the difference between these two.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/functional-component-and-class-component-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Functional component and Class component in React"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":259,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5046"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5046"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5046\/revisions"}],"predecessor-version":[{"id":5051,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5046\/revisions\/5051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5047"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}