Callback as Props the React Way

by basiclaser

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var ViewController = React.createClass({
  getInitialState: function() {
    return {ActiveView: "contacts"};
  },
  handleClick: function (clickTarget) {
    return(this.setState({ActiveView:"<" + clickTarget.value + " />"}));
  },
  render: function () {
    return (
      <div>
      <Nav onClick={this.handleClick} />
      {this.state.ActiveView}
      </div>
      );
  }
});


var Nav = React.createClass({
  render: function () {
    return (
        <ul>
            <button value="contacts" ref="contacts" onClick={this.handleClick}>contacts</button>
            <button value="chat" ref="chat" onClick={this.handleClick}>chat</button>
        </ul>
    );
  },

  handleClick: function (e) {
    this.props.onClick(e.target);
  },
});
var chat = React.createClass({
  render: function () {
    return (
        <span>chatasdasdaddasd</span>
    );
  }
});
var contacts = React.createClass({
  render: function () {
    return (
        <span>contactssssss</span>
    );
  }
});

React.renderComponent(<ViewController />, document.body);