{"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 […]<\/p>\n","protected":false},"author":503,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_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":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-7352","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1UA","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_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}]}}