From e98244adb5c2d562f9118a5bc366287225004158 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Sun, 24 Nov 2013 16:17:30 -0500
Subject: [PATCH] docs tips parent-child communication

---
 docs/_data/nav_tips.yml                       |  2 +
 docs/tips/13-false-in-jsx.md                  |  1 +
 .../tips/14-communicate-between-components.md | 40 +++++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 docs/tips/14-communicate-between-components.md

diff --git a/docs/_data/nav_tips.yml b/docs/_data/nav_tips.yml
index c1eb1808426..95824f282e7 100644
--- 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
index 0c86bddf557..3b46f12895c 100644
--- 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
new file mode 100644
index 00000000000..84c1a9feb90
--- /dev/null
+++ 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.