{"id":23610,"date":"2022-11-27T07:06:03","date_gmt":"2022-11-27T01:36:03","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/"},"modified":"2022-11-27T07:06:03","modified_gmt":"2022-11-27T01:36:03","slug":"solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/","title":{"rendered":"[Solved] how to pass an element from other components to a specific component in React.js [closed]"},"content":{"rendered":"

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

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

Related to your title of this question:<\/p>\n

You can achieve the passing of data and objects through to child components through the use of attributes where you use your component.<\/p>\n

You really don’t need to use the DOM to access the elements on the page, and with React being highly dynamic in nature, the DOM is in a constant state of change which can lead to many issues if you try to bypass React.<\/p>\n

So if you have your header component used in your app like this…<\/p>\n

     <PageHeader userData={ userData } \/>\n<\/code><\/pre>\n
Then within your component, which is named PageHeader in this example, define the constants as:<\/p>\n
const PageHeader = (props) => {\n\n    const userData= props.userData;\n<\/code><\/pre>\n
Note the object name to use with “props” is the same that you used with the attribute name.<\/p>\n
Props will contain all attributes that are defined on the attribute where the component is used.<\/p>\n
Just to provide another way to use “props” (the name is not significant) I’ll include this code snippet too.  Notice that react will auto map each one to it’s proper constant… which is pretty cool.<\/p>\n
const PageHeader = ( props ) => {\n    const { uischema, schema, path, visible, renderers, userData } = props;\n    \n<\/code><\/pre>\n
And one last thing that I should mention, is the use of the props.children<\/code>, which can be very useful too.  This is where DivScrollable is defined, and is using the props.children<\/code>.<\/p>\n
const DivScrollable = (props) => {\n\n    return (\n        <div className={styles.divscrollable} >\n            {props.children}\n        <\/div>\n    );\n};\n<\/code><\/pre>\n
So the power of props.children<\/code> is that it passes along the contents of what is contained between the opening and closing tags of a component.  In this example it’s the MyComponent<\/code> object that is within the props.children<\/code> object.  But it could also include others too since it’s “all of the content” between the component tags.<\/p>\n
    <DivScrollable>\n        <MyComponent src={props.src} \n                theme=\"monotyped\"\n                spacing=\"4\"\n                enableClipboard=\"true\"\n                name={null}\n                \/>\n    <\/DivScrollable>\n<\/code><\/pre>\n
To then address the onClick<\/code> handling, which you mention within the body of your question, you can use use it like the following, where I am reusing the above examples… see the “onClick” addition within the DivScrollable component.<\/p>\n
const DivScrollable = (props) => {\n\n  const performSomeFunction= (aValue) => {\n    ... code goes here...;\n  };\n    return (\n        <div className={styles.divscrollable} \n            onClick={() => {\n                    performSomeFunction(true);\n                }} >\n            {props.children}\n        <\/div>\n    );\n};\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved how to pass an element from other components to a specific component in React.js [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Related to your title of this question: You can achieve the passing of data and objects through to child components through the use of attributes where you use your component. You really don’t need to use the DOM to access the elements on the page, and with React being highly dynamic in nature, the … 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":[346,333,784],"class_list":["post-23610","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-reactjs"],"yoast_head":"\n[Solved] how to pass an element from other components to a specific component in React.js [closed] - 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-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] how to pass an element from other components to a specific component in React.js [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Related to your title of this question: You can achieve the passing of data and objects through to child components through the use of attributes where you use your component. You really don’t need to use the DOM to access the elements on the page, and with React being highly dynamic in nature, the ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-27T01:36:03+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-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] how to pass an element from other components to a specific component in React.js [closed]\",\"datePublished\":\"2022-11-27T01:36:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/\"},\"wordCount\":330,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/\",\"name\":\"[Solved] how to pass an element from other components to a specific component in React.js [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-11-27T01:36:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] how to pass an element from other components to a specific component in React.js [closed]\"}]},{\"@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\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"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 to pass an element from other components to a specific component in React.js [closed] - 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-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] how to pass an element from other components to a specific component in React.js [closed] - JassWeb","og_description":"[ad_1] Related to your title of this question: You can achieve the passing of data and objects through to child components through the use of attributes where you use your component. You really don’t need to use the DOM to access the elements on the page, and with React being highly dynamic in nature, the ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-27T01:36:03+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-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] how to pass an element from other components to a specific component in React.js [closed]","datePublished":"2022-11-27T01:36:03+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/"},"wordCount":330,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/","name":"[Solved] how to pass an element from other components to a specific component in React.js [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-27T01:36:03+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-pass-an-element-from-other-components-to-a-specific-component-in-react-js-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] how to pass an element from other components to a specific component in React.js [closed]"}]},{"@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\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","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\/23610","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=23610"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23610\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=23610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=23610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=23610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}