{"id":15901,"date":"2022-10-13T11:54:30","date_gmt":"2022-10-13T06:24:30","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/"},"modified":"2022-10-13T11:54:30","modified_gmt":"2022-10-13T06:24:30","slug":"solved-add-a-component-to-another-component-on-button-click","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/","title":{"rendered":"[Solved] Add a component to another component on button click"},"content":{"rendered":"

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

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

You should let React render everything, and your job is only to tell React what to render and, in your case, how many times.<\/p>\n

For that, a counter<\/code> can be used to track how many dynamically-added elements should be “injected” inside the <Example><\/code> component.<\/p>\n

\n

A mindshift is needed here, since in your example you are coming from a place where you think that the click handler itself should modify the DOM, and in React that is an antipattern.<\/p>\n

\n

You should work with the React<\/em> state<\/strong>, and that means the click handler should update the state of the host component which will trigger a re-render<\/em> (this is how React works) and in the next render cycle, your added component will be rendered as many times as the counter value, because that counter change is what triggered the re-rendering.<\/p>\n

In React, the props & state are the way to trigger re-render and any DOM modification should be done by changing the internal component’s state, or by sending different props, from the parent component.<\/p>\n

\n

In the below example I do not<\/em> use Classes<\/strong>, but use Hooks<\/a><\/strong> instead, because I’ve stopped using class<\/em> altogether once hooks were released, because I think it’s cleaner:<\/p>\n<\/p>\n

\n
\n
\/\/ Get a hook function\nconst {useState, useCallback} = React;\n\n\/\/ The added element component\nconst AddedElement = () => <div><input placeholder=\"text box\" \/><\/div>\n\n\/\/ The \"app\" component\nconst Example = () => {\n  const [count, setCount] = useState(0);\n\n  return <div>\n    <button onClick={() => setCount(count + 1)}>\n      Click me\n    <\/button>\n    { Array(count).fill(<AddedElement \/>) }\n  <\/div>\n};\n\n\/\/ Render \nReactDOM.render(\n  <Example \/>,\n  document.getElementById(\"react\")\n);<\/code><\/pre>\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/16.8.4\/umd\/react.production.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-dom\/16.8.4\/umd\/react-dom.production.min.js\"><\/script>\n<div id=\"react\"><\/div><\/code><\/pre>\n<\/div>\n<\/div>\n
If you are interested in how to repeatedly render<\/strong> the same component, I’ve written an answer about this in this question: How can I render repeating React elements?<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Add a component to another component on button click <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You should let React render everything, and your job is only to tell React what to render and, in your case, how many times. For that, a counter can be used to track how many dynamically-added elements should be “injected” inside the <Example> component. A mindshift is needed here, since in your example you … 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":[333,3760,784],"class_list":["post-15901","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jsx","tag-reactjs"],"yoast_head":"\n[Solved] Add a component to another component on button click - 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-add-a-component-to-another-component-on-button-click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Add a component to another component on button click - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You should let React render everything, and your job is only to tell React what to render and, in your case, how many times. For that, a counter can be used to track how many dynamically-added elements should be “injected” inside the <Example> component. A mindshift is needed here, since in your example you ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-13T06:24:30+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=\"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-add-a-component-to-another-component-on-button-click\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Add a component to another component on button click\",\"datePublished\":\"2022-10-13T06:24:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/\"},\"wordCount\":251,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\",\"jsx\",\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/\",\"name\":\"[Solved] Add a component to another component on button click - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-13T06:24:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Add a component to another component on button click\"}]},{\"@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] Add a component to another component on button click - 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-add-a-component-to-another-component-on-button-click\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Add a component to another component on button click - JassWeb","og_description":"[ad_1] You should let React render everything, and your job is only to tell React what to render and, in your case, how many times. For that, a counter can be used to track how many dynamically-added elements should be “injected” inside the <Example> component. A mindshift is needed here, since in your example you ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/","og_site_name":"JassWeb","article_published_time":"2022-10-13T06:24:30+00:00","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-add-a-component-to-another-component-on-button-click\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Add a component to another component on button click","datePublished":"2022-10-13T06:24:30+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/"},"wordCount":251,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","jsx","reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/","url":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/","name":"[Solved] Add a component to another component on button click - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-13T06:24:30+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-add-a-component-to-another-component-on-button-click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Add a component to another component on button click"}]},{"@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\/15901","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=15901"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/15901\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=15901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=15901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=15901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}