reactjs - How to pass function groups as props in React? -

i use simple react component example.

i access this.setstate() inside functions 'working' , 'group.notworking'.

var mycomponent = react.createclass({   getinitialstate: function() {     return {};   },    working: function() {     this.setstate({ test: true });  //this mycomponent   },    group: {     notworking: function() {       console.log(this); //this window     }   },    render: function() {     return (         <div>           <childcomponent working={this.working} group={this.group}/>         </div>     );   }, }); 

my question how pass functions grouped in object, or there best practice, avoid passing functions 1 one children components.

you need pass bound version of it.

<childcomponent working={this.working} group={this.group.notworking.bind(this)}/> 

if want pass whole group need make function returns object , bind it:

group: function() {     return {         notworking: function() {           console.log(this);         }.bind(this)     }; } 

https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/function/bind