Reactjs how to change the state of a component from a different component

Question

I have a react component, lets call it as component 1

define([..., /path/component_2.jsx], function(..., Component2) {
   var Component1 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      componentDidMount: function() {
          .......
          dates = ....;
          Component2.setState({dates: dates});
      }
       render: function() { return (<div ...></div>) }
   });
}

As you can see, I am calling the Component2.setState in this component. But I am getting an error like setState is not a function. I tried this with defining a custom function instead of setState function in component 2 and calling this function from component 1, but I am getting the same error, 'is not a function'.

And component 2:

define([..., ], function(...) {
   var Component2 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      render: function() { return (<div ...></div>) }
   });
}

So I guess in reactjs we calls a component only for rendering something (React DOM elements)? and cannot change the component state?

If so how can I change a state of a component from a different component which is not a child or parent of first?

Answer 1

Components don't publicly expose their state. It's also important to remember that the state is scoped to the instance of components, not their definition.

To communicate between components, you could roll your own event subscription service.

var events = new EventEmitter();

// inside Component1
events.emit('change-state', newState);

// inside Component2
events.on('change-state', function(state) {
  this.setState(state);
});

However, this will quickly become difficult to manage.

A more sensible solution is to use Flux. It allows you to explicitly manage the state of your entire application and subscribe to changes in different bits of the state, within your components. It's worth trying to wrap your head around it.

The component that wants to communicate should dispatch an action and this action will be responsible for changing something in the stores, your other component should subscribe to that store and can update its state based on the change.

Answer 2

You can use a shared state between the two component. You can build a "mixin" like that

app.mixins.DateMixin = {
   getInitialState: function () 
      return {
          dates: []
         }
      }
};

and then in you components you can include this mixins using the mixins array

define([..., /path/component_2.jsx], function(..., Component2) {
   var Component1 = React.createClass({

      mixins: [app.mixins.DateMixin],

      getInitialState: function() {
         return {.......};
      },

      componentDidMount: function() {
          .......
          dates = ....;
          this.setState({dates: dates});
      }
       render: function() { return (<div ...></div>) }
   });
}

define([..., ], function(...) {

   mixins: [app.mixins.DateMixin],

   var Component2 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      render: function() { return (<div ...></div>) }
   });
}

Now your components share the "dates" state and you can change/check it in both of them. NB: you can also share methods with in the same way by writing into a mixin component.

Edit: I suggest you to visit this website http://simblestudios.com/blog/development/react-mixins-by-example.html