{"id":20993,"date":"2022-11-11T16:38:53","date_gmt":"2022-11-11T11:08:53","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/"},"modified":"2022-11-11T16:38:53","modified_gmt":"2022-11-11T11:08:53","slug":"solved-focus-issues-with-react","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/","title":{"rendered":"[Solved] Focus issues with react"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-58909980\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"58909980\" data-parentid=\"58909229\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>You are not using <code>createRef<\/code> and trying to use <code>focus<\/code> method which is the issue.<br \/>\nSimply create <code>callback ref<\/code> and you are good to go.<\/p>\n<p>Here is the working code below and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codesandbox.io\/s\/hidden-feather-9n5m4\">codesandbox link<\/a>.<\/p>\n<p>index.js<\/p>\n<pre><code>import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport FocusComp from \".\/FocusComp\";\n\nclass App extends React.Component {\n  state = {\n    focus: false\n  };\n  render() {\n    return (\n      &lt;div className=\"App\"&gt;\n        &lt;button onClick={() =&gt; this.setState({ focus: true })}&gt;\n          click me to focus\n        &lt;\/button&gt;\n        &lt;br \/&gt;\n        &lt;br \/&gt;\n        &lt;FocusComp isFocussed={this.state.focus} \/&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(&lt;App \/&gt;, rootElement);\n<\/code><\/pre>\n<p>FocusComp.js<\/p>\n<pre><code>import React from \"react\";\n\nclass FocusComp extends React.Component {\n  componentWillReceiveProps(nextProps) {\n    if (nextProps.isFocussed) {\n      this.myRef.focus();\n    }\n  }\n  render() {\n    return &lt;input ref={myRef =&gt; (this.myRef = myRef)} \/&gt;;\n  }\n}\n\nexport default FocusComp;\n<\/code><\/pre>\n<p>I created a working code to make you understand what you did wrong.<\/p>\n<p><strong>Things to improve:-<\/strong><\/p>\n<p>1) use <code>createRef<\/code> instead of callback.<\/p>\n<p>2) Don&#8217;t use <code>componentWillReceiveProps<\/code> as it&#8217;s deprecated.<\/p>\n<p>Hope that helps!!!<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Focus issues with react <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] You are not using createRef and trying to use focus method which is the issue. Simply create callback ref and you are good to go. Here is the working code below and codesandbox link. index.js import React from &#8220;react&#8221;; import ReactDOM from &#8220;react-dom&#8221;; import FocusComp from &#8220;.\/FocusComp&#8221;; class App extends React.Component { state = &#8230; <a title=\"[Solved] Focus issues with react\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\" aria-label=\"More on [Solved] Focus issues with react\">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,1953],"class_list":["post-20993","post","type-post","status-publish","format-standard","hentry","category-solved","tag-reactjs","tag-ref"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Focus issues with react - 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-focus-issues-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Focus issues with react - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You are not using createRef and trying to use focus method which is the issue. Simply create callback ref and you are good to go. Here is the working code below and codesandbox link. index.js import React from &quot;react&quot;; import ReactDOM from &quot;react-dom&quot;; import FocusComp from &quot;.\/FocusComp&quot;; class App extends React.Component { state = ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-11T11:08:53+00:00\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Focus issues with react\",\"datePublished\":\"2022-11-11T11:08:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\"},\"wordCount\":77,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"reactjs\",\"ref\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\",\"name\":\"[Solved] Focus issues with react - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-11T11:08:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Focus issues with react\"}]},{\"@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=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Focus issues with react - 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-focus-issues-with-react\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Focus issues with react - JassWeb","og_description":"[ad_1] You are not using createRef and trying to use focus method which is the issue. Simply create callback ref and you are good to go. Here is the working code below and codesandbox link. index.js import React from \"react\"; import ReactDOM from \"react-dom\"; import FocusComp from \".\/FocusComp\"; class App extends React.Component { state = ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/","og_site_name":"JassWeb","article_published_time":"2022-11-11T11:08:53+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Focus issues with react","datePublished":"2022-11-11T11:08:53+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/"},"wordCount":77,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["reactjs","ref"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/","url":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/","name":"[Solved] Focus issues with react - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-11T11:08:53+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-focus-issues-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Focus issues with react"}]},{"@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=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","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\/20993","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=20993"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20993\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}