React is designed with unidirectional data flow, providing better visibility into our apps and allowing for debugging to become easier. However, this built-in algorithm has a negative side effect when flowing data from one component to another. This is why when designing an app with React, nesting child components within parent components could correct the lack of data flow, and pass data from the child to the parent, and vise versa.
Understanding Props and State:
When it comes to finding the right tools to initialize the flow of data, there are two variants that I have in mind: props and state. Each variant is meant for their own individual functionality when it comes to dealing with data transfer between components.
Props: An argument which acts as an immutable object literal that can store data. Meant to pass data from a Parent component to a child component. Props can be used in both functional and class components.
State: A mutable object that can determine the behaviors of a component. Meant to help hold data of the component itself. Meant to pass data from a child component to a parent component. It can only be used in class components and update event handlers.
Passing data from parent to child:
When passing data from parent to child with React, it is crucial to use props to instantiate the data being sent through props and give data the child component will have access to.
Passing data from child to parent:
The best way to pass data from child to parent is to define the callback in the parent component which takes in data as a parameter. From there you pass the callback as a prop to the child and call the callback by entering “this.props.[callback]” and pass data as the argument.
Examples:
Now that we know how we can pass data between parent and child components, let’s take a look at some examples of how these methods are used in code:
The example above depicts a child component instantiating data from the parent component using props. Now, because this component is a class, it uses this.state to update the data and re-send data back to the parent component (being depicted with the keys known as “vari” and “dis”).
And here is the parent component. As depicted on line 8, the child component is being called, and the html which is instantiated from the child component through this.state will be retrieved by the parent component again. A complete cycle of data transfer! Now if we were to run our code, we would generate a line of text with the data sent into the child component and back into the parent component upon each click.
Dealing with data transfer in react may seem like a tedious task, but after fully understanding the two techniques provided above, your clouds of stress would clear and you would become enlightened with knowledge, and passing data through components will hopefully now be a breeze.
