{"id":7352,"date":"2023-09-02T16:28:45","date_gmt":"2023-09-02T10:58:45","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=7352"},"modified":"2023-09-02T16:28:49","modified_gmt":"2023-09-02T10:58:49","slug":"passing-variables-and-functions-among-components-in-react-js","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/","title":{"rendered":"Passing variables and functions among components in React JS"},"content":{"rendered":"\n

There are different ways of communication available to pass data between the components in react projects.<\/p>\n\n\n\n

Method One: Using Call back functions & props<\/strong><\/p>\n\n\n\n

For passing data from parent to child component, we use props. Props data is sent by the parent component and cannot be changed by the child component as they are read-only.<\/p>\n\n\n\n

\/\/ComponentOne.js:<\/u><\/em><\/p>\n\n\n\n

import React from ‘react’;<\/p>\n\n\n\n

import ComponentTwo from “.\/mysystem\/ComponentTwo.js”<\/p>\n\n\n\n

const ComponentOne = () => {<\/p>\n\n\n\n

varOne = Name;<\/p>\n\n\n\n

varTwo = Age;<\/p>\n\n\n\n

return<\/p>\n\n\n\n

(<\/p>\n\n\n\n

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

<ComponentTwo varOne={varOne} varTwo={varTwo}\/><\/p>\n\n\n\n

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

)}<\/p>\n\n\n\n

export default ComponentOne;<\/p>\n\n\n\n

\/\/ComponentTwo.js<\/u><\/em>:<\/em>
\n
\nimport <\/code>React <\/code>from <\/code>'react';<\/code><\/pre>\n\n\n\n
import <\/code>ComponentOne <\/code>from <\/code>'\/mysystem\/ComponentOne.js';<\/code><\/pre>\n\n\n\n
const <\/code>ComponentTwo = (<\/code>props) => {<\/code><\/pre>\n\n\n\n
return<\/pre>\n\n\n\n
<div><\/pre>\n\n\n\n
<p>{props.varOne}, {props.varTwo}<\/p><\/pre>\n\n\n\n
<\/div><\/code><\/pre>\n\n\n\n
export <\/code>default <\/code>ComponentTwo;<\/pre>\n\n\n\n
Method Two: Using React Hooks<\/strong><\/p>\n\n\n\n
React hooks such as useHistory, useNavigate<\/code> can be used to push the new route from parent component and pass the state object as the second argument for the child component.<\/p>\n\n\n\n
In the receiving component, useLocation hook is used to access the state object and retrieve the passed data.<\/p>\n\n\n\n
\/\/ComponentOne.js:<\/u><\/em><\/p>\n\n\n\n
import {useHistory} from \u2018react-router-dom\u2019;<\/p>\n\n\n\n
const ComponentOne = () = > {<\/p>\n\n\n\n
const history = useHistory();<\/p>\n\n\n\n
const data ={ name: \u201cJohn\u201d,  age: 30};<\/p>\n\n\n\n
const handleClick = () => {<\/p>\n\n\n\n
history.push({pathname:\u201d\/componentTwo\u201d, state: data});<\/p>\n\n\n\n
};<\/p>\n\n\n\n
return <button onClick={handleClick}>Go to ComponentTwo<\/button>;<\/p>\n\n\n\n
};<\/p>\n\n\n\n
export default ComponentOne;<\/p>\n\n\n\n
\/\/ComponentTwo.js:<\/u><\/em><\/p>\n\n\n\n
import {useLocation} from \u201creact-rouer-dom\u201d;<\/p>\n\n\n\n
const ComponentTwo = () => {<\/p>\n\n\n\n
const location = useLocation();<\/p>\n\n\n\n
const data = location.state;<\/p>\n\n\n\n
return (<\/p>\n\n\n\n
<div><\/p>\n\n\n\n
<p> Name : {data.name} <\/p><\/p>\n\n\n\n
<p> Age : {data.age} <\/p><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
);<\/p>\n\n\n\n
};<\/p>\n\n\n\n
export default ComponentTwo;<\/p>\n","protected":false},"excerpt":{"rendered":"
There are different ways of communication available to pass data between the components in react projects. Method One: Using Call back functions & props For passing data from parent to child component, we use props. Props data is sent by the parent component and cannot be changed by the child… Continue Reading Passing variables and functions among components in React JS<\/span><\/i><\/a><\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-7352","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"description\" content=\"There are different ways of communication available to pass data between the components in react projects. One is through callback functions with props and another is by using react Hooks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"There are different ways of communication available to pass data between the components in react projects. One is through callback functions with props and another is by using react Hooks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-02T10:58:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-02T10:58:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3837\" \/>\n\t<meta property=\"og:image:height\" content=\"2540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brindha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brindha\" \/>\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:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/\"},\"author\":{\"name\":\"Brindha\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/32dac30adb7fda20718df787cd6572f9\"},\"headline\":\"Passing variables and functions among components in React JS\",\"datePublished\":\"2023-09-02T10:58:45+00:00\",\"dateModified\":\"2023-09-02T10:58:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/\"},\"wordCount\":238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"datePublished\":\"2023-09-02T10:58:45+00:00\",\"dateModified\":\"2023-09-02T10:58:49+00:00\",\"description\":\"There are different ways of communication available to pass data between the components in react projects. One is through callback functions with props and another is by using react Hooks.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/passing-variables-and-functions-among-components-in-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Passing variables and functions among components in React JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/32dac30adb7fda20718df787cd6572f9\",\"name\":\"Brindha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g\",\"caption\":\"Brindha\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/brindha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","description":"There are different ways of communication available to pass data between the components in react projects. One is through callback functions with props and another is by using react Hooks.","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:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"There are different ways of communication available to pass data between the components in react projects. One is through callback functions with props and another is by using react Hooks.","og_url":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2023-09-02T10:58:45+00:00","article_modified_time":"2023-09-02T10:58:49+00:00","og_image":[{"width":3837,"height":2540,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png","type":"image\/png"}],"author":"Brindha","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Brindha","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/"},"author":{"name":"Brindha","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/32dac30adb7fda20718df787cd6572f9"},"headline":"Passing variables and functions among components in React JS","datePublished":"2023-09-02T10:58:45+00:00","dateModified":"2023-09-02T10:58:49+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/"},"wordCount":238,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/","url":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"datePublished":"2023-09-02T10:58:45+00:00","dateModified":"2023-09-02T10:58:49+00:00","description":"There are different ways of communication available to pass data between the components in react projects. One is through callback functions with props and another is by using react Hooks.","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/passing-variables-and-functions-among-components-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Passing variables and functions among components in React JS"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/32dac30adb7fda20718df787cd6572f9","name":"Brindha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f3f7caf582852829d9231b58b1558593887b4e0bb7bbce137b5a469780ebb87?s=96&r=g","caption":"Brindha"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/brindha\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-1UA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/503"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7352"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7352\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}