Communicate Between Components

For parent-child communication, simply pass props.

For child-parent communication:
Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name:

  1. var handleClick = function(i, props) {
  2.   console.log('You clicked: ' + props.items[i]);
  3. }
  5. function GroceryList(props) {  
  6.   return (
  7.     <div>
  8.       {props.items.map(function(item, i) {
  9.         return (
  10.           <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
  11.         );
  12.       })}
  13.     </div>
  14.   );
  15. }
  17. ReactDOM.render(
  18.   <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
  19. );

Notice the use of bind(this, arg1, arg2, ...): we’re simply passing more arguments to handleClick. This is not a new React concept; it’s just JavaScript.

For communication between two components that don’t have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.