docs tips parent-child communication

chenglou · zpao · commit 48af9c7bdad9 · 2013-12-02T15:49:27.000-08:00
diff --git a/docs/_data/nav_tips.yml b/docs/_data/nav_tips.yml
@@ -26,3 +26,5 @@
     title: Load Initial Data via AJAX
   - id: false-in-jsx
     title: False in JSX
+  - id: communicate-between-components
+    title: Communicate Between Components
diff --git a/docs/tips/13-false-in-jsx.md b/docs/tips/13-false-in-jsx.md
@@ -4,6 +4,7 @@ title: False in JSX
 layout: tips
 permalink: false-in-jsx.html
 prev: initial-ajax.html
+next: communicate-between-components.html
 ---
 
 Here's how `false` renders in different contexts:
diff --git a/docs/tips/14-communicate-between-components.md b/docs/tips/14-communicate-between-components.md
@@ -0,0 +1,40 @@
+---
+id: communicate-between-components
+title: Communicate Between Components
+layout: tips
+permalink: communicate-between-components.html
+prev: false-in-jsx.html
+---
+
+For parent-child communication, simply [pass props](/react/docs/multiple-components.html).
+
+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:
+
+```js
+/** @jsx React.DOM */
+
+var GroceryList = React.createClass({
+  handleClick: function(i) {
+    console.log('You clicked: ' + this.props.items[i]);
+  },
+  
+  render: function() {
+    return (
+      <div>
+        {this.props.items.map(function(item, i) {
+          return (
+            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
+          );
+        }, this)}  
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+  <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.
