diff --git a/_data/nav_tips.yml b/_data/nav_tips.yml index c1eb1808..95824f28 100644 --- a/_data/nav_tips.yml +++ b/_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/tips/13-false-in-jsx.md b/tips/13-false-in-jsx.md index 0c86bddf..3b46f128 100644 --- a/tips/13-false-in-jsx.md +++ b/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/tips/14-communicate-between-components.md b/tips/14-communicate-between-components.md new file mode 100644 index 00000000..84c1a9fe --- /dev/null +++ b/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 ( +
+ {this.props.items.map(function(item, i) { + return ( +
{item}
+ ); + }, this)} +
+ ); + } +}); + +React.renderComponent( + , 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.