event bus in React?
I'm mainly using Vue, and just recently picked up React. Loving it so far, and its quite similar in a lot of ways to Vue, which makes learning it way easier.
Now, let's consider two siblings component. I want to trigger something in component number one, when something happens in component number two. In Vue you can just bind window.bus = new Vue, and then emit in one of the components bus.$emit('event') and bind in the mounted() of the second component bus.$on('event', this.doSth).
How can you achieve that in React?
javascript reactjs
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
add a comment |
I'm mainly using Vue, and just recently picked up React. Loving it so far, and its quite similar in a lot of ways to Vue, which makes learning it way easier.
Now, let's consider two siblings component. I want to trigger something in component number one, when something happens in component number two. In Vue you can just bind window.bus = new Vue, and then emit in one of the components bus.$emit('event') and bind in the mounted() of the second component bus.$on('event', this.doSth).
How can you achieve that in React?
javascript reactjs
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
1
The React way would be to have the parent of the components pass a callback to one of the components, which the component calls. The parent then does something with the data and rerenders, passing the data to the other component. Of course you could also just use any pubsub library and hook up the components directly. It's really up to you.
– Felix Kling
Nov 16 '18 at 0:42
Thank you for the answer, Ill take a look at the pubsub libraries too.
– Tomasz Rup
Nov 16 '18 at 0:57
add a comment |
I'm mainly using Vue, and just recently picked up React. Loving it so far, and its quite similar in a lot of ways to Vue, which makes learning it way easier.
Now, let's consider two siblings component. I want to trigger something in component number one, when something happens in component number two. In Vue you can just bind window.bus = new Vue, and then emit in one of the components bus.$emit('event') and bind in the mounted() of the second component bus.$on('event', this.doSth).
How can you achieve that in React?
javascript reactjs
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
I'm mainly using Vue, and just recently picked up React. Loving it so far, and its quite similar in a lot of ways to Vue, which makes learning it way easier.
Now, let's consider two siblings component. I want to trigger something in component number one, when something happens in component number two. In Vue you can just bind window.bus = new Vue, and then emit in one of the components bus.$emit('event') and bind in the mounted() of the second component bus.$on('event', this.doSth).
How can you achieve that in React?
javascript reactjs
javascript reactjs
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
edited Nov 16 '18 at 0:36
Tomasz Rup
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
asked Nov 16 '18 at 0:31
Tomasz RupTomasz Rup
46128
46128
1
The React way would be to have the parent of the components pass a callback to one of the components, which the component calls. The parent then does something with the data and rerenders, passing the data to the other component. Of course you could also just use any pubsub library and hook up the components directly. It's really up to you.
– Felix Kling
Nov 16 '18 at 0:42
Thank you for the answer, Ill take a look at the pubsub libraries too.
– Tomasz Rup
Nov 16 '18 at 0:57
add a comment |
1
The React way would be to have the parent of the components pass a callback to one of the components, which the component calls. The parent then does something with the data and rerenders, passing the data to the other component. Of course you could also just use any pubsub library and hook up the components directly. It's really up to you.
– Felix Kling
Nov 16 '18 at 0:42
Thank you for the answer, Ill take a look at the pubsub libraries too.
– Tomasz Rup
Nov 16 '18 at 0:57
1
1
The React way would be to have the parent of the components pass a callback to one of the components, which the component calls. The parent then does something with the data and rerenders, passing the data to the other component. Of course you could also just use any pubsub library and hook up the components directly. It's really up to you.
– Felix Kling
Nov 16 '18 at 0:42
The React way would be to have the parent of the components pass a callback to one of the components, which the component calls. The parent then does something with the data and rerenders, passing the data to the other component. Of course you could also just use any pubsub library and hook up the components directly. It's really up to you.
– Felix Kling
Nov 16 '18 at 0:42
Thank you for the answer, Ill take a look at the pubsub libraries too.
– Tomasz Rup
Nov 16 '18 at 0:57
Thank you for the answer, Ill take a look at the pubsub libraries too.
– Tomasz Rup
Nov 16 '18 at 0:57
add a comment |
2 Answers
2
active
oldest
votes
A parent component can manage the state and methods consumed by child components when passed down through props.
The following example increments a count. SibOne displays the count and a button in SibTwo increments the count.
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div className="App">
<SibOne count={this.state.count}/>
<SibTwo incrementCount={this.incrementCount}/>
</div>
);
}
}
const SibOne = props => <div>Count: {props.count}</div>;
const SibTwo = props => (
<button onClick={props.incrementCount}>
Increment Count
</button>
);
Demo: https://codesandbox.io/s/zqp9wj2n63
More on Components and Props: https://reactjs.org/docs/components-and-props.html
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
add a comment |
In the case of two sibling components, you would hold the state in the parent component and pass that state as a prop to both siblings:
class ParentComponent extends Component {
state = {
specialProp: "bar"
}
changeProp = () => {
// this.setState..
}
render() {
return (
<div>
<FirstSibling specialProp={this.state.specialProp} />
<SecondSibling changeProp={this.changeProp} specialProp={this.state.specialProp} />
</div>
);
}
}
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329773%2fevent-bus-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
A parent component can manage the state and methods consumed by child components when passed down through props.
The following example increments a count. SibOne displays the count and a button in SibTwo increments the count.
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div className="App">
<SibOne count={this.state.count}/>
<SibTwo incrementCount={this.incrementCount}/>
</div>
);
}
}
const SibOne = props => <div>Count: {props.count}</div>;
const SibTwo = props => (
<button onClick={props.incrementCount}>
Increment Count
</button>
);
Demo: https://codesandbox.io/s/zqp9wj2n63
More on Components and Props: https://reactjs.org/docs/components-and-props.html
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
add a comment |
A parent component can manage the state and methods consumed by child components when passed down through props.
The following example increments a count. SibOne displays the count and a button in SibTwo increments the count.
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div className="App">
<SibOne count={this.state.count}/>
<SibTwo incrementCount={this.incrementCount}/>
</div>
);
}
}
const SibOne = props => <div>Count: {props.count}</div>;
const SibTwo = props => (
<button onClick={props.incrementCount}>
Increment Count
</button>
);
Demo: https://codesandbox.io/s/zqp9wj2n63
More on Components and Props: https://reactjs.org/docs/components-and-props.html
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
add a comment |
A parent component can manage the state and methods consumed by child components when passed down through props.
The following example increments a count. SibOne displays the count and a button in SibTwo increments the count.
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div className="App">
<SibOne count={this.state.count}/>
<SibTwo incrementCount={this.incrementCount}/>
</div>
);
}
}
const SibOne = props => <div>Count: {props.count}</div>;
const SibTwo = props => (
<button onClick={props.incrementCount}>
Increment Count
</button>
);
Demo: https://codesandbox.io/s/zqp9wj2n63
More on Components and Props: https://reactjs.org/docs/components-and-props.html
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
A parent component can manage the state and methods consumed by child components when passed down through props.
The following example increments a count. SibOne displays the count and a button in SibTwo increments the count.
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div className="App">
<SibOne count={this.state.count}/>
<SibTwo incrementCount={this.incrementCount}/>
</div>
);
}
}
const SibOne = props => <div>Count: {props.count}</div>;
const SibTwo = props => (
<button onClick={props.incrementCount}>
Increment Count
</button>
);
Demo: https://codesandbox.io/s/zqp9wj2n63
More on Components and Props: https://reactjs.org/docs/components-and-props.html
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
edited Nov 16 '18 at 0:56
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
answered Nov 16 '18 at 0:49
wdmwdm
5,67911823
5,67911823
add a comment |
add a comment |
In the case of two sibling components, you would hold the state in the parent component and pass that state as a prop to both siblings:
class ParentComponent extends Component {
state = {
specialProp: "bar"
}
changeProp = () => {
// this.setState..
}
render() {
return (
<div>
<FirstSibling specialProp={this.state.specialProp} />
<SecondSibling changeProp={this.changeProp} specialProp={this.state.specialProp} />
</div>
);
}
}
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
add a comment |
In the case of two sibling components, you would hold the state in the parent component and pass that state as a prop to both siblings:
class ParentComponent extends Component {
state = {
specialProp: "bar"
}
changeProp = () => {
// this.setState..
}
render() {
return (
<div>
<FirstSibling specialProp={this.state.specialProp} />
<SecondSibling changeProp={this.changeProp} specialProp={this.state.specialProp} />
</div>
);
}
}
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
add a comment |
In the case of two sibling components, you would hold the state in the parent component and pass that state as a prop to both siblings:
class ParentComponent extends Component {
state = {
specialProp: "bar"
}
changeProp = () => {
// this.setState..
}
render() {
return (
<div>
<FirstSibling specialProp={this.state.specialProp} />
<SecondSibling changeProp={this.changeProp} specialProp={this.state.specialProp} />
</div>
);
}
}
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
In the case of two sibling components, you would hold the state in the parent component and pass that state as a prop to both siblings:
class ParentComponent extends Component {
state = {
specialProp: "bar"
}
changeProp = () => {
// this.setState..
}
render() {
return (
<div>
<FirstSibling specialProp={this.state.specialProp} />
<SecondSibling changeProp={this.changeProp} specialProp={this.state.specialProp} />
</div>
);
}
}
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
answered Nov 16 '18 at 0:44
DmitriyDmitriy
611216
611216
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329773%2fevent-bus-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
The React way would be to have the parent of the components pass a callback to one of the components, which the component calls. The parent then does something with the data and rerenders, passing the data to the other component. Of course you could also just use any pubsub library and hook up the components directly. It's really up to you.
– Felix Kling
Nov 16 '18 at 0:42
Thank you for the answer, Ill take a look at the pubsub libraries too.
– Tomasz Rup
Nov 16 '18 at 0:57