javascript - Update ReactJS app using websocket -

i trying supervision page customer, struggling updating reactjs app in real time. supervision page can contains sixteen video flux, can or cannot in service @ same time.

when generate page django, build initial list stored in js variable :

var anims = {{list|safe}} 

my reactjs code single video flux following :

var modelflux = react.createclass({     displayname : "flux player",     proptypes: {         animid: react.proptypes.number.isrequired,     },     componentdidmount:function() {        //generating player     },     render: function() {         var newdivid = 'iv' + this.props.animid;         return(             react.createelement('div',{classname:'col-md-3 col-sm-6 col-xs-12'},                 react.createelement('div', {id:"content"},                     react.createelement('div',{id:newdivid,classname:'smallpl'})                 )             )         )     } }) 

then, use following generate x flux:

var modelfluxwithid = anims     .map(function(anim) {return react.createelement('div',{},react.createelement(modelflux,{key:anim.key,animid:anim.animid}))}) 

and finally, call app :

var app = react.createclass({     displayname : "react app",     render: function() {         return(             react.createelement('div',{classname:'container'},                 react.createelement('div',{classname:'row'},modelfluxwithid)             )         )     } })  reactdom.render(     react.createelement(app),     document.getelementbyid('react-app') ) 

it working fine when page generated. customer doesn't want load page each time flux online/offline, monitor in real time status of each flux websocket, update anims :

ws = new websocket('xxxxxx'); ws.onmessage = function(event) {     // update anims variable       } 

how can proceed update app when anims changing (creating/destroying) ?

you need keep anim variable state within app class, , map modelflux instances state. when anim state updated, relevant child components updated. example,

var app = react.createclass({   displayname : "react app",   render: function() {     return(         react.createelement('div',{classname:'container'},             react.createelement('div',{classname:'row'},{this.mapanims(this.state.anims)})         )     )   },   getinitialstate: function() {     return {       anims: youranimsvariable     };   },   updateanims: function(newanims) {     this.setstate({       anims: newanims     });   },   mapanims: function() {     return this.state.anims.map(function(anim) {        return react.createelement('div',{},react.createelement(modelflux,{key:anim.key,animid:anim.animid});     }   },   componentwillmount: function() {     var ws = new websocket('xxxxxx');     ws.onmessage = event => {         this.updateanims(event.data.anims); //or wherever new anim data in event         }   } });  reactdom.render(   react.createelement(app),   document.getelementbyid('react-app') )