define(function(require) {

  var React   = require('react');
  var jsx     = require('lib/jsxquasi');

  var EchoComponent = React.createClass({
    getInitialState: function() {
        return { value: '' };
    },

    handleChange: function() {
        this.setState({ value: this.refs.input.getDOMNode().value });
    },

    render: function() {
        return jsx`
            <div>
                <input 
                    ref='input' 
                    onChange='${this.handleChange}' 
                    defaultValue='${this.state.value}' />
                ${this.state.value}
            </div>
        `;
    }
  })

  return function() {
    var comp = jsx`<${EchoComponent} />`;
    React.renderComponent(comp, document.body);
  };
});

/*If you name the render function, DevTools will also include its name (e.g. "ForwardRef(myFunction)"):*/

const WrappedComponent = React.forwardRef(
  function myFunction(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />;
  }
);

/* When the ref is attached, ref.current will point to the <button> DOM node */