react.dev/tips/14-communicate-between-components.md

id, title, layout, permalink, prev, next

id	title	layout	permalink	prev	next
communicate-between-components	Communicate Between Components	tips	tips/communicate-between-components.html	false-in-jsx.html	expose-component-functions.html

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:

var handleClick = function(i, props) {
  console.log('You clicked: ' + props.items[i]);
}

function GroceryList(props) {  
  return (
    <div>
      {props.items.map(function(item, i) {
        return (
          <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
        );
      })}
    </div>
  );
}

ReactDOM.render(
  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

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.