The hierarchy in which React components are composed resembles the hierarchy of the DOM tree that they are used to construct. In the hierarchy, there are elements that are lower (children) and elements that are higher (parents). Let’s examine the data flow and directional communication that React allows between components
1. Dhara Gosai
August 3, 2023
How do components in React interact with
one another?
Table of Contents
1. Parent-to-child with props Example
2. Child-to-Parent with function props
3. From Child to Parent with Callbacks
4. Conclusion
5. Frequently Asked Questions (FAQs)
2. The hierarchy in which React components are composed resembles the hierarchy of
the DOM tree that they are used to construct. In the hierarchy, there are elements that
are lower (children) and elements that are higher (parents). Let’s examine the data
몭ow and directional communication that React allows between components.
We examine in-depth each of the above-mentioned methods of component-to-
component communication in React in this post. We will see how to accomplish the
two communication scenarios in each case:
Parent to Child
Child to Parent
The most straightforward direction for data 몭ow is from parent to kid, or down the
hierarchy. Props is the mechanism used by React to achieve this. Any function that
takes in the props parameter is a React component. Props is an object that can have
any number of 몭elds in it; it is a bag of data.
Props are the means by which a parent component transfers data to a child
component. Assume that we have a BookList component with information for a book
list. It wishes to provide the child Book component with the details of every book in its
list as iterates through the book list during render time. It can use props to accomplish
that. The child component receives these props as attributes in jsx.
Parent-to-child with props Example
function BookList() {
const list = [
{ title: 'The Great Gatsby', author: 'Harper Lee' },
{ title: 'The Catcher in the Rye', author: 'J. D. Salinger'
},
// ...
]
return (
<ul>
3. {list.map((book, i) =>
<Book title={book.title}
author={book.author} key={i}
/>)}
</ul>
)
}
Afterwards, those 몭elds as contained in the props parameter to its function can be
received and used by the Book component:
function Book(props) {
return (
<li>
<h2>{props.title</h2>
<div>{props.author}</div>
</li>
)
}
Child-to-Parent with function props
It is undesirable, I know, but before a child can respond to a parent, it needs to be given
a way to do so. We discovered that parents use props to convey information to their
kids. A kid may inherit a “special” prop of type function. When a pertinent event occurs,
such a user interaction, the child can invoke this function as a callback.
function BookTitle(props) {
return (
<label>
Title:
<input onChange={props.onTitleChange} value={props.title} /
>
</label>
)
4. }
It gets a message from its parent, the onTitleChange method, in the props. This
function is bound to the input /> 몭eld’s onChange event. The change Event object will
be passed to the onTitleChange callback when the input changes.
The arguments supplied to the method can be received by the parent, BookEditForm,
as it has a reference to it:
In this instance, the handleTitleChange function was supplied by the parent, and upon
calling it, it establishes the internal state by using the value of evt.target.value, which
was obtained as a callback argument from the child component.
From Child to Parent with Callbacks
It is undesirable, I know, but before a child can respond to a parent, it needs to be given
a way to do so. We discovered that parents use props to convey information to their
kids. A kid may inherit a “special” prop of type function. When a pertinent event occurs,
such a user interaction, the child can invoke this function as a callback.
function BookTitle(props) {
return (
<label>
Title:
<input onChange={props.onTitleChange} value={props.title} /
>
</label>
)
}
It gets a message from its parent, the onTitleChange method, in the props. This
function is bound to the input /> 몭eld’s onChange event. The change Event object will
be passed to the onTitleChange callback when the input changes.
5. Conclusion
The techniques built into React for intercomponent communication are
straightforward and e몭cient. Props enable data to move from parent to child in the
component hierarchy. The callback function is supplied through props when a child
wants to talk back to a parent. Context offers more convenience and opens the door to
creative coding patterns by supplying data globally throughout the component tree
hierarchy. React also integrates effectively with other frameworks and patterns to
interact between components.
If you need help developing a React app for your business, you can hire React app
developer from Bosc Tech Labs. We have a talented team of experienced React
programmers who can help you build a high-quality, user-friendly React app.
Frequently Asked Questions (FAQs)
1. What is the connection between the two components?
Property-based communication, often known as prop communication, is the most
basic method of component communication. Props are the informational components
that parents send to their child components, much like arguments to a function.
2. How are React components executed?
Components are independent, reusable chunks of code. They accomplish the same
thing as JavaScript functions but operate independently and return HTML. There are
two kinds of components in React i.e., class components and function components.
For this reason, we will focus on function components.
3. What do React props do?
6. Our Locations
Florida
1176 Shadeville Rd,
Crawfordville, FL 32327, USA.
Gandhinagar
501, 502 Shree Ugati Corporate Park,
Near Nexa Showroom,
Kudasan, Gandhinagar,
Gujarat - 382421 India
Props are an acronym for “properties.” These components can only be read. It is an
object that functions similarly to HTML attributes, storing the value of a tag’s
attributes. It gives a technique for data to be sent between components. They are
comparable to function arguments.
BOOK YOUR APPOINTMENT NOW
Request a Quote
SUBMIT
Full Name*
Email Address*
Phone Number*
Your Message
US O몭ce India O몭ce
7. +1 (850) 780-1313
Gujarat - 382421 India
+91 (777) 796-5000
Company Services
Solutions Enterprise
Our team of experienced developers has the potential to solve every problem you might face with
web or mobile development. We bring the experience of 10+ years to you and use it to turn your
requirements into a product that gives a great overall experience for your customers and you. Our
highly-skilled team of individuals have worked in large conglomerates and bring the same level of
professionalism to the table which enables us to serve you better.
Who We Are
Why Choose Us
Blog
Career
Contact Us
Mobile App Development
iOS App Development
Android App Development
Wordpress Development
Custom Software Development
On demand App Solution
Photo Editing App Solution
Taxi Booking App
Fleet Management
Photo Editing App
Enterprise Mobility
Custom Solutions
Healthcare Apps
B2B
![The hierarchy in which React components are composed resembles the hierarchy of
the DOM tree that they are used to construct. In the hierarchy, there are elements that
are lower (children) and elements that are higher (parents). Let’s examine the data
몭ow and directional communication that React allows between components.
We examine in-depth each of the above-mentioned methods of component-to-
component communication in React in this post. We will see how to accomplish the
two communication scenarios in each case:
Parent to Child
Child to Parent
The most straightforward direction for data 몭ow is from parent to kid, or down the
hierarchy. Props is the mechanism used by React to achieve this. Any function that
takes in the props parameter is a React component. Props is an object that can have
any number of 몭elds in it; it is a bag of data.
Props are the means by which a parent component transfers data to a child
component. Assume that we have a BookList component with information for a book
list. It wishes to provide the child Book component with the details of every book in its
list as iterates through the book list during render time. It can use props to accomplish
that. The child component receives these props as attributes in jsx.
Parent-to-child with props Example
function BookList() {
const list = [
{ title: 'The Great Gatsby', author: 'Harper Lee' },
{ title: 'The Catcher in the Rye', author: 'J. D. Salinger'
},
// ...
]
return (
<ul>](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)