How do components in React interact with one another?

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.

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 flow 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 fields 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>
      {list.map((book, i) => 
      <Book title={book.title} 
      author={book.author} key={i} 
      />)}
    </ul>
  )
}

Afterwards, those fields 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>
  )
}

It gets a message from its parent, the onTitleChange method, in the props. This function is bound to the input /> field’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 /> field’s onChange event. The change Event object will be passed to the onTitleChange callback when the input changes.

Conclusion

The techniques built into React for intercomponent communication are straightforward and efficient. 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?

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