In React JS, there’s generally a need to pass data from one component to another. With the help of state, we can pass data from somewhere in a component, to somewhere else inside the same component.
State is the heart of every React component. It’s an object that determines component behavior and distribution. In other words, “state” allows to create components that are dynamic and interactive.
State behave differently depending on conditions within components. We can change the way objects appear or interact by changing the state of those objects within a component.
To change state in a component, its 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 transported 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 acceptable 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 resolved the state in a component prior. In that example, the state could be used and passed throughout the component. Passing data from parent to child components is only slightly complex, in that, we can’t pass data in an unbroken chain to other components. In the above sample, we would really 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:
And if I want to pass data back up the chain, from child to parent?
This is a slightly more difficult process.
- Define a callback in the parent which takes the data as a parameter.
- Move that callback as a prop to the child.
- Call the callback using this.props.[callback] in the child, and pass in the data as an argument.
Basis on 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);
As props are constant, 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 short description of how to change data within a component, and transfer data to other child and parent components.
