React, render single state/object multiple times - reactjs

Question

My real application, is to use react to create a firefox addon, to maintain an object/state in a DOM-less scope, and then render an element to the currently active browser window. Multiple browser windows are present.
So as a small experiment, to see if react can do this, I was messing around with the Timer example on the reactjs main site.
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
var rendered = ReactDOM.render(<Timer />, mountNode);
// i hope to do something here to render it to another node
Is it possible to render the same timer to multiple nodes? The state should be same, and if i modify state in that single object it should affect both. Is this possible?
Thanks!

Answer 1

I actually tried a different method. I used a singleton object with an array of callbacks as a property. This array of callbacks stores innerMethods of all elements mounted which correspond to a particular event.
Ideally, you should do have a key value pair
event => [All functions to fire]
But for this example, I went for a rather primitive scenario where there is only one event. So it's just an array of call callbacks for that event(doSomething).
http://codepen.io/bhargav175/pen/rxNRxO
MyStore
let MyStore = {
doSomething : function(v){
MyStore.callbacks.forEach((callback)=>{
callback(v);
});
},
callbacks :[],
addSomethingListener : function(callback){
MyStore.callbacks.push(callback);
}
}
Everytime a component is mounted I do this,
componentDidMount(props){
MyStore.addSomethingListener(this.doStuff.bind(this));
}
which adds callbacks from each element to the Store and each of them gets fired when the event occurs.
Full code.
let MyStore = {
doSomething : function(v){
MyStore.callbacks.forEach((callback)=>{
callback(v);
});
},
callbacks :[],
addSomethingListener : function(callback){
MyStore.callbacks.push(callback);
}
}
/*
* A simple React component
*/
class Application extends React.Component {
constructor(props){
super(props);
this.state = {'some_prop':0};
}
doStuff(val){
this.setState({
'some_prop':val
});
}
componentDidMount(props){
MyStore.addSomethingListener(this.doStuff.bind(this));
}
render() {
return <div>
<h1>Hello, ES6 and React 0.13!</h1>
<p>
{this.state.some_prop}
</p>
</div>;
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
React.render(<Application />, document.getElementById('yetanotherapp'));
MyStore.doSomething(5);
MyStore.doSomething(15);
MyStore.doSomething(25);
So, if you see, I fire the doSomething event and all the components are updated at different mount nodes. In your case, you could move your tick logic into doSomething. Just a start. Hope this has helped.