import React from 'react';

var Button = React.createClass({
  getInitialState() {
    return {};
  },
  render() {
    const {
      children,
      kind = 'default'
    } = this.props;

    const cls = `btn btn-${kind}`;

    return (
      <button className={cls} role="button"
        onClick={() => this.setState(s => ({ toggle: !s.toggle }))}
        style={{ fontSize: this.state.toggle ? '20px' : '10px'}}
      >
        {children}
      </button>
    );
  }
});

export default Button;

import React from 'react';

var Button = React.createClass({
  render() {
    const {
      children,
      kind = 'default'
    } = this.props;

    const cls = `btn btn-${kind}`;

    return (
      <button className={cls} role="button">
        {children}
      </button>
    );
  }
});

export default Button;

--- 
+++ 
@@ -1,9 +1,6 @@
 import React from 'react';
 
 var Button = React.createClass({
-  getInitialState() {
-    return {};
-  },
   render() {
     const {
       children,
@@ -13,10 +10,7 @@
     const cls = `btn btn-${kind}`;
 
     return (
-      <button className={cls} role="button"
-        onClick={() => this.setState(s => ({ toggle: !s.toggle }))}
-        style={{ fontSize: this.state.toggle ? '20px' : '10px'}}
-      >
+      <button className={cls} role="button">
         {children}
       </button>
     );
Make the button example a bit more dynamic
