score:0

Accepted answer

you could try adding container that wraps your html and adding a callback prop to grandchildright for it to call when its state updates:

var grandchildright = react.createclass({
    clicksomething: function () {
        this.props.onupdate({data:'you clicked me'});
    }
});

var leftcomponent = react.createclass({
    render : function () {
        {this.props.data}
    };
});

var container = react.createclass({
    onrightgrandchildupdate: function( newstate ) {
       this.setstate(newstate);
    },

    render: function() {
        return (<div classname="container">
          <div classname="left">
             <leftcomponent data={this.state.data} />
          </div>
          <div classname="right">
            <rightcomponent>
              <anothercomponent>
                <grandchildright onupdate={this.onrightgrandchildupdate.bind(this)} />
              </anothercomponent>
            </rightcompoent>
          </div>
        </div>);
    }
});

(notice the .bind(this) when passing this.onrightgrandchildupdate to onupdate of the grandchildright component. doing so ensures this binds to the container component, and not the current global object.)

then your "html" becomes:

<container />

essentially, this lifts the data you're interested in to a level above both the right grandchild and left component. the supplied onupdate property allows the right grandchild to update the container's state, which then affects the data passed into the left component.

score:3

there should be a parent component above all of this then grandchildright component will let parent component about any change then parent component will tell left component about the change

var parent = react.createclass({
     handleeventchange : function(event){
         this.setstate({data:event.data})
     },
     render : function () {
         <leftcomponent data={this.state.data}/>
         <rightcomponent oneventchange={this.handleeventchange}/>

     };
});

var leftcomponent = react.createclass({
     render : function () {
         <div>{this.props.data}</div>
     };
});

var rightcomponent = react.createclass({
     render : function () {
         <grandchildrightcomponent onchildchange={this.handlechildevent}/>
     };
     handlechildevent : function (event) {
         this.props.oneventchange({data: event.data})
     };

});

var grandchildrightcomponent = react.createclass({
      clicksomething : function () {
         this.props.onchildchange({data:'grand child is clicked'})
      }
});

Related Query

More Query from same tag