Skip to content

Commit

Permalink
docs tips parent-child communication
Browse files Browse the repository at this point in the history
  • Loading branch information
chenglou authored and zpao committed Dec 2, 2013
1 parent 1da10d7 commit 48af9c7
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/_data/nav_tips.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions docs/tips/13-false-in-jsx.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
40 changes: 40 additions & 0 deletions docs/tips/14-communicate-between-components.md
Original file line number Diff line number Diff line change
@@ -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.

0 comments on commit 48af9c7

Please sign in to comment.