{"id":30318,"date":"2023-01-14T13:18:59","date_gmt":"2023-01-14T07:48:59","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/"},"modified":"2023-01-14T13:18:59","modified_gmt":"2023-01-14T07:48:59","slug":"solved-functional-component-to-class-component","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/","title":{"rendered":"[Solved] functional component to class component"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You should<\/em> be able to use a functional component regardless of really understanding how they work, but converting functional components is fairly trivial if you understand react state\/props\/lifecycle.<\/p>\n

Basic steps:<\/p>\n

    \n
  1. Convert all state hooks to single state object and update all state update functions to now use this.setState<\/code> with the correct state to be merged.<\/li>\n
  2. Convert effect hooks to appropriate lifecycle function (usually componentDidMount<\/code>, componentDidUpdate<\/code>, and\/or componentWillUnmount<\/code>.<\/li>\n
  3. Convert ref hook to regular react.createRef`.<\/li>\n
  4. Convert all callback and utility functions to be instance functions (remove const<\/code>).<\/li>\n
  5. Move previous return into render<\/code> lifecycle function<\/li>\n
  6. Update all state\/prop, and callback and utility functions to correctly access this<\/code> of the component, either for function invocation or state\/prop access.<\/li>\n<\/ol>\n

    Class-based component<\/p>\n

    import React, { Component, createRef } from \"react\";\nimport Button from \"@material-ui\/core\/Button\";\nimport Dialog from \"@material-ui\/core\/Dialog\";\nimport DialogActions from \"@material-ui\/core\/DialogActions\";\nimport DialogContent from \"@material-ui\/core\/DialogContent\";\nimport DialogContentText from \"@material-ui\/core\/DialogContentText\";\nimport DialogTitle from \"@material-ui\/core\/DialogTitle\";\n\nexport default class ScrollDialog extends Component {\n  state = {\n    open: false,\n    scroll: \"paper\"\n  };\n\n  handleClickOpen = scrollType => () => {\n    this.setState({\n      open: true,\n      scroll: scrollType\n    });\n  };\n\n  handleClose = () => {\n    this.setState({ open: false });\n  };\n\n  descriptionElementRef = createRef();\n\n  componentDidUpdate(prevProps, prevState) {\n    if (this.state.open) {\n      const { current: descriptionElement } = this.descriptionElementRef;\n      if (descriptionElement !== null) {\n        descriptionElement.focus();\n      }\n    }\n  }\n\n  render() {\n    const { open, scroll } = this.state;\n    return (\n      <div>\n        <Button onClick={this.handleClickOpen(\"paper\")}>scroll=paper<\/Button>\n        <Button onClick={this.handleClickOpen(\"body\")}>scroll=body<\/Button>\n        <Dialog\n          open={open}\n          onClose={this.handleClose}\n          scroll={scroll}\n          aria-labelledby=\"scroll-dialog-title\"\n          aria-describedby=\"scroll-dialog-description\"\n        >\n          <DialogTitle id=\"scroll-dialog-title\">Subscribe<\/DialogTitle>\n          <DialogContent dividers={scroll === \"paper\"}>\n            <DialogContentText\n              id=\"scroll-dialog-description\"\n              ref={this.descriptionElementRef}\n              tabIndex={-1}\n            >\n              {[...new Array(50)]\n                .map(\n                  () => `Cras mattis consectetur purus sit amet fermentum.\n  Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n  Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\n  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`\n                )\n                .join(\"\\n\")}\n            <\/DialogContentText>\n          <\/DialogContent>\n          <DialogActions>\n            <Button onClick={this.handleClose} color=\"primary\">\n              Cancel\n            <\/Button>\n            <Button onClick={this.handleClose} color=\"primary\">\n              Subscribe\n            <\/Button>\n          <\/DialogActions>\n        <\/Dialog>\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
    \"Edit<\/a><\/p>\n<\/p><\/div>\n
    <\/div>\n<\/div>\n
                2<\/span> <\/p><\/div>\n<\/div>\n
    [ad_2]<\/p>\n
    solved functional component to class component <\/p>\n","protected":false},"excerpt":{"rendered":"
    [ad_1] You should be able to use a functional component regardless of really understanding how they work, but converting functional components is fairly trivial if you understand react state\/props\/lifecycle. Basic steps: Convert all state hooks to single state object and update all state update functions to now use this.setState with the correct state to be … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[784],"class_list":["post-30318","post","type-post","status-publish","format-standard","hentry","category-solved","tag-reactjs"],"yoast_head":"\n[Solved] functional component to class component - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] functional component to class component - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You should be able to use a functional component regardless of really understanding how they work, but converting functional components is fairly trivial if you understand react state\/props\/lifecycle. Basic steps: Convert all state hooks to single state object and update all state update functions to now use this.setState with the correct state to be ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-14T07:48:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\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:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] functional component to class component\",\"datePublished\":\"2023-01-14T07:48:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\"},\"wordCount\":129,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\",\"keywords\":[\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\",\"name\":\"[Solved] functional component to class component - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\",\"datePublished\":\"2023-01-14T07:48:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] functional component to class component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] functional component to class component - JassWeb","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:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] functional component to class component - JassWeb","og_description":"[ad_1] You should be able to use a functional component regardless of really understanding how they work, but converting functional components is fairly trivial if you understand react state\/props\/lifecycle. Basic steps: Convert all state hooks to single state object and update all state update functions to now use this.setState with the correct state to be ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/","og_site_name":"JassWeb","article_published_time":"2023-01-14T07:48:59+00:00","og_image":[{"url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","type":"","width":"","height":""}],"author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] functional component to class component","datePublished":"2023-01-14T07:48:59+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/"},"wordCount":129,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","keywords":["reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/","url":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/","name":"[Solved] functional component to class component - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","datePublished":"2023-01-14T07:48:59+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#primaryimage","url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml"},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-functional-component-to-class-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] functional component to class component"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=30318"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30318\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=30318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=30318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=30318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}