/** @jsx React.DOM */

​

var App = React.createClass({

  getInitialState: function(){

    return {lines: ["this is line 1", "this is line 2" , "this is line 3"]};

  },

  render: function(){

    return (

        <div>

          <h2>3 ComponentB inside ComponentA</h2>

          <p><i>no events if you edit the lines</i></p>

          <ComponentA 

            lines={this.state.lines}/>

          <h2>Component B alone</h2>

          <p><i>you do get the events if you edit the line</i></p>

          <ComponentB data={this.state.lines[0]}/>

          <hr/>

        </div>

    );

  }

});

​

var ComponentA = React.createClass({

    render: function(){

        return (

          <div

            contentEditable>

            { 

              this.props.lines.map(function(line,i) {

                return <ComponentB key={i} data={line} />  

              })

            }             

          </div>

          );

    }

});

​

var ComponentB = React.createClass({

​

  render: function() {

    return (

      <div 

           contentEditable 

           onKeyDown={this.handleKeyDown}>{this.props.data}</div>

    );

  },

  handleKeyDown: function(e) {

    console.log("B: " + e.type +"-" + e.which);

  }

});

​

React.renderComponent(

  <App />,

  document.getElementById('app')

);