How does one React component call a method in another React component?
My page contains two completely separate React components (different files, different classes, parent-child relationships).
How can one component call an instance method in another component? The problem seems to be getting the instance of the target component.
EDIT: Both components have the same parent (i.e. they appear in the same method render()
), but I still don't know how to pass the reference of the target component to the calling component.
source to share
The short answer is: they don't.
It's not clear what you're trying to accomplish, so I can't talk about the specifics of your case, but the way React components "swap" with each other is state and props. For example, consider a component Page
that has two child components, CompA
and CompB
did something like this:
<Page>
<CompA />
<CompB />
</Page>
If CompA
you need to pass something to CompB
, this is done through the state in the component Page
, and this state is displayed as a props on CompA
and CompB
, something like this:
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
sharedValue: 42,
};
}
onChangeSharedValue(newValue) {
this.setState({ sharedValue: newValue });
}
render() {
return (
<div>
<CompA
sharedValue={this.state.sharedValue}
onChange={this.onChangeSharedValue}
/>
<CompB
sharedValue={this.state.sharedValue}
onChange={this.onChangeSharedValue}
/>
</div>
);
}
}
If the CompA
overall value needs to be changed, it calls a handler onChange
that changes the state of the component Page
. This value will then be passed to the component CompB
.
There is no direct relationship between the components you describe; it's all done through state and props.
source to share
"Supports down, Events up."
If you provide us with a specific example of what you are looking for, I may update this post with a more specific answer.
But in general, there are several strategies you can take. Some of them are presented here.
The preferred approach is to simply port your call method to the parent component. This is a common strategy in React.
If you can't, then the next step is to write an event handler for the parent and then pass that event to the first child component.
Use this event to pass information up to the parent so that when it starts, the data can be passed as props to the second component.
source to share
you can dispatch the event as a props and call it from another component.
Let's say you have a class
Class A{
handleChange(evt)
{
this.setState({
name:evt.target.value
})
}
render{
return(
<div>
<ComponentB name={this.state.name}{ onChange={this.handleChange}/>
</div>
);
}
}
Child Component
Class B{
handleChange()
{
//logic
}
render{
return(
<div>
<input type="text" onChange={this.props.onChange}/>
{this.props.name}
</div>
);
}
- Here in component B, when you change the input, it is called by the method of class A and update state A.
- Now getting the updated state as a props in component B will give you the modified text you just entered.
source to share