React Fundamentals: Owner Ownee Relationship

React Fundamentals: Owner Ownee Relationship

by Angelo Rogério Rubin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>
<h1>React Fundamentals: Owner Ownee Relationship</h1>
<div class="content"></div>

<script type="text/jsx">
var App = React.createClass({
  getInitialState:function(){
    return {
      txt: ''
    };
  },
  update: function(e){
    this.setState({txt: e.target.value});
  },
  render:function(){
    return (
      <div>
        <Widget txt={this.state.txt} update={this.update} />
        <Widget txt={this.state.txt} update={this.update} />
        <Widget txt={this.state.txt} update={this.update} />
        <Widget txt={this.state.txt} update={this.update} />
        <Widget txt={this.state.txt} update={this.update} />
      </div>
      );

  }
});

var Widget = React.createClass({
  render:function(){
    return (
      <div>
        <input type="text" onChange={this.props.update} />
        <br />
        <b>{this.props.txt}</b>
      </div>
      );

  }
});

React.render(<App txt="this is the txt prop"  />, $('.content').text());
</script>