{"id":17263,"date":"2022-10-23T18:03:47","date_gmt":"2022-10-23T12:33:47","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/"},"modified":"2022-10-23T18:03:47","modified_gmt":"2022-10-23T12:33:47","slug":"solved-how-locally-managing-components-state-in-react-redux","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/","title":{"rendered":"[Solved] How locally managing component&#8217;s state in React\/Redux"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-40990420\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"40990420\" data-parentid=\"40986148\" data-score=\"0\" 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>First of all, that&#8217;s not the way how to ask a good question. You need to show us some code, what did you try, where is the problem. <\/p>\n<p>Check here how to ask good question.<\/p>\n<p>The solution for your problem would be to store the index of the clicked button in your local state and then check inside rendering your buttons if the index is the same as the index in the state.<\/p>\n<p>You can do something like this : <\/p>\n<pre><code>let buttons = ['Button 1', 'Button 2', \"Button 3\"]\n\n\nclass Test extends React.Component {\n  constructor(){\n    this.state = {\n        active: null\n    }\n  }\n\n  handleClick(i,event){\n    this.setState({\n        active: i\n    })\n  }\n\n   render(){\n    return (\n        &lt;div&gt;\n            {this.props.buttons.map((button, i) =&gt; {\n               return (\n                  &lt;div key={i}&gt;&lt;button className={this.state.active === i ? 'active' : ''} onClick={this.handleClick.bind(this, i)}&gt;{button}&lt;\/button&gt;&lt;\/div&gt;\n               );\n            })}\n      &lt;\/div&gt;\n    )\n  }\n}\n\nReact.render(&lt;Test buttons={buttons}\/&gt;, document.getElementById('container'));\n<\/code><\/pre>\n<p>Here is the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/jwm6k66c\/1515\/\">fiddle<\/a>.<\/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 How locally managing component&#8217;s state in React\/Redux <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] First of all, that&#8217;s not the way how to ask a good question. You need to show us some code, what did you try, where is the problem. Check here how to ask good question. The solution for your problem would be to store the index of the clicked button in your local state &#8230; <a title=\"[Solved] How locally managing component&#8217;s state in React\/Redux\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\" aria-label=\"More on [Solved] How locally managing component&#8217;s state in React\/Redux\">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,1109],"class_list":["post-17263","post","type-post","status-publish","format-standard","hentry","category-solved","tag-reactjs","tag-redux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] How locally managing component&#039;s state in React\/Redux - 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-how-locally-managing-components-state-in-react-redux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How locally managing component&#039;s state in React\/Redux - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] First of all, that&#8217;s not the way how to ask a good question. You need to show us some code, what did you try, where is the problem. Check here how to ask good question. The solution for your problem would be to store the index of the clicked button in your local state ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-23T12:33:47+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-how-locally-managing-components-state-in-react-redux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How locally managing component&#8217;s state in React\/Redux\",\"datePublished\":\"2022-10-23T12:33:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\"},\"wordCount\":106,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"reactjs\",\"redux\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\",\"name\":\"[Solved] How locally managing component's state in React\/Redux - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-23T12:33:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How locally managing component&#8217;s state in React\/Redux\"}]},{\"@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=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How locally managing component's state in React\/Redux - 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-how-locally-managing-components-state-in-react-redux\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How locally managing component's state in React\/Redux - JassWeb","og_description":"[ad_1] First of all, that&#8217;s not the way how to ask a good question. You need to show us some code, what did you try, where is the problem. Check here how to ask good question. The solution for your problem would be to store the index of the clicked button in your local state ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/","og_site_name":"JassWeb","article_published_time":"2022-10-23T12:33:47+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-how-locally-managing-components-state-in-react-redux\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How locally managing component&#8217;s state in React\/Redux","datePublished":"2022-10-23T12:33:47+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/"},"wordCount":106,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["reactjs","redux"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/","url":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/","name":"[Solved] How locally managing component's state in React\/Redux - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-23T12:33:47+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-locally-managing-components-state-in-react-redux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How locally managing component&#8217;s state in React\/Redux"}]},{"@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=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","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\/17263","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=17263"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/17263\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=17263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=17263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=17263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}