HI WELCOME TO Sirees

React.JS — Component Data Transfer

Leave a Comment
In React JS, there’s often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through state.

So what is state?

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive.
Think of state as the difference between water, ice and vapor. It’s the same object, but depending on conditions, it can behave differently. That’s the same way we use state within components. We can change the way objects appear, or interact by changing the state of those objects within a component.

How do I change state in a component?

Normally you would need to declare the state after you set the constructor. That might look something like this:
class component_A extends Component {
 constructor() {
 super();
 this.state = {
 data: [],
 };
}
In this case, we are defining the state of data. I’ve defined it here as an empty array. We could have used an empty object, or empty quotes, depending on the data type we wanted to change the state of. Then when we are ready to change the state, we would simply use “this.setState.” With our example above, it might look like this:
this.setState({data: data});
Okay, so let’s say you have two components, and you need to pass data from one component to another. Well, you wouldn’t be able to use state. State can only be transferred within the component where it was created. Instead, you can use props, or properties. Let’s imagine you have a React project, with a file structure that looks like the following:
Here, we have component_A, with files nested inside of it, and then it’s child components, component_B and component_C. It’s very likely that component_A would have data that we would need to access in component_C. How would we access that, or pass the data from component_A to component_C? Basically, what we want to do, is this:
I want to pass the property of color from the parent component to one of the child components. We can pass prop using “this” the same way we set the state in a component earlier. In that example, the state could the be used and passed throughout the component. Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components. In the above example, we would actually need to pass the data, in this case, {this.props.color} from component_A to component_B and then to component_C. It would look like this:

What if I want to pass data back up the chain, from child to parent?

This is a slightly more difficult process.
  1. Define a callback in the parent which takes the data as a parameter.
  2. Pass that callback as a prop to the child.
  3. Call the callback using this.props.[callback] in the child, and pass in the data as an argument.
From our above example, our code might look something like this:
class component_A extends Component {
 constructor() {
 super();
 this.state = {
 listDataFromComponent_C: “ “,
 };
}
myCallback = (dataFromComponent_C) => {
this.setState({ dataFromComponent_C: dataFromComponent_C});
Now from within the child component (component_C) we can pass something to callbackFromParent:
this.props.callbackFromParent(listInfo);
Because props are static, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component. In order to do this, set this parameter as a state within the new component. It might look like the following:
class component_A extends Component {
constructor (props) {
super(props);
this.state = {
dataFromComponent_C: “ “
};
},
myCallback = (dataFromComponent_C) => {
this.setState({ dataFromComponent_C: dataFromComponentC });
This is just a brief explanation of how to change data within a component, and transfer data to other child and parent components. I hope this is helpful, and feel free to reach out if you have any questions, or if I missed anything. Thanks!

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.