How Do You Pass Value From One Component To Another In ReactJS

For powerful work with ReactJS Development you need to fully understand all its basic features and know how to use them. In this article,

I will explain what components are, the value that is transferred between them and how to do it. Read on, it will be interesting!

The main idea of React is to create components. A number of components can be thought of as a user interface component. It can be a button, menu, widget, or even whole applications.

Components allow you to break the interface into independent parts that are easy to think about separately. They can be stacked together, used multiple times, combined and in general do a lot of things with them, which makes development easier.

Even YouTube can be broken down into components: logo, search bar, menu, and so on. It is not written in React, I just give an analogy so now you understand what I am talking about. In many ways, the components are similar to the functions of JavaScript. They store state using properties and return the React elements that will then appear on the web page.

There are several kinds of components, namely: functional (functional programming style, clean and simple) and class-based (object-oriented programming style, can have state, lifecycle methods and refs). The next thing to note is the props.

What is it? In fact, these are some values that we want to statically and immediately pass to our component. That means, we can use props to pass any properties to the component. Props provide the values associated with the component. There are some differences from functional and class-based components in using props.

In order to use props in class-based components, we do not need to write a parameter, we need to write the keyword ‘this.props’ and then the name of your property. We can also pass an array of values to the props. React also gives us the ability to set a default property. This allows us to specify what the props value should be if we do not explicitly specify it.

Why do we pass values between components in ReactJS?

For example, we need data from one component to be displayed in another, or we click on the button of one component, and the data changes in the next one. In React, the data flow is unidirectional. This means that the data is transmitted as a waterfall from top to down, from parent to child through the props. You have already read what props are above.

How to do it? Let’s start with an easy way to pass value from parent to child. To do this, you can simply display the state or use props to transfer it to the child component. In React, state is passed in one direction down the component tree of your application, from the parent component while maintaining their state to the child component.

Child components receive only the state data they need to know. Complex applications can be split into several components and the rest of the components simply receive state from the parent as props and display the UI from that state. That is how we create a division in which state management is expressed in one part of the code and visualization is completely in another part of it.

You can pass states as props to child components, but you are not limited to passing data. You can also pass function handlers or any method defined in a component to a child component. This allows child components to interact with their parent components.

There is another way to pass value between components: from a child to a parent. This data transfer reminds me of a boomerang, there is a starting point – this is our parent component, and there is a point of maximum distance – this is a child component.

And there is our tool – boomerang, in ReactJS it will be a function that is in the parent and is passed through props to the child, where it is called. But if they don’t have any relation between each other you can create a solution using Redux.

Conclusion

React promotes a component approach, it means the approach in which we divide the blocks of a web site and some of its elements into separate components in which we can control various elements, which adds flexibility to the development of our application.

In ReactJS, data transfer can be done in two ways: from parent to child components and vice versa. In this article, I briefly wrote how to do this and explained what components are and why we transfer value between them. I hope you found something useful for yourself!