Example of React Event Handling

[DrYSG]

Any chance of adding to the readme a simple React Event Handling example?

I am getting the error:

jquery.js:3855 Uncaught Error: Expected onClick listener to be a function, instead got type string

Basically, I am trying to create an event handler for the JSX template. But it seems to be putting in a string instead of a function handle.

I also would really like to use the new 0.14 syntax for defining classes, but I don't see where to put the handler.

Anyway, below is where I am now, and the issue is not the rendering, it is the

button onClick={this.handleClick}

$(document).ready(creator);

function activateLasers(e) {
    alert("lasers on");
}

function creator() {

    t7.module(function (t7) {
        t7.setOutput(t7.Outputs.React);

        const Wrapper = props => (
            t7`
            <div>
              <h1>Wrapper-${props.name}</h1>
              <Inner name=${props.name} />
            </div>
          `
        );
        Wrapper.displayName = "Wrapper";
        Wrapper.propTypes = {
            name: React.PropTypes.string
        };

        class Inner extends React.Component {
            handleClick() {
                console.log('this is:', this);
            }

            render() {
            return t7`
            <div>
              <h2>Inner-${this.props.name}</h2>
              <button onClick={this.handleClick}>
                    Activate Lasers
              </button>
            </div>
          `
            };
        };
        Inner.displayName = "Inner";
        Inner.propTypes = {
            name: React.PropTypes.string
        };

        t7.assign({
            "Wrapper": Wrapper,
            "Inner": Inner
        });

        ReactDOM.render(
            t7`<Wrapper name="YSG"/>`,
            document.getElementById('root')
        );
    });

}

[DrYSG]

Silly me, (see below for the fix). But I would still like to see some updated examples, using the new const creator, as well as other JSX type things such as maps, propTypes, etc.

$(document).ready(creator);

function activateLasers(e) {
    alert("lasers on");
}

function creator() {

    t7.module(function (t7) {
        t7.setOutput(t7.Outputs.React);

        const Wrapper = props => (
            t7`
            <div>
              <h1>Wrapper-${props.name}</h1>
              <Inner name=${props.name} />
            </div>
          `
        );
        Wrapper.displayName = "Wrapper";
        Wrapper.propTypes = {
            name: React.PropTypes.string
        };

        class Inner extends React.Component {
            constructor(props) {
                super(props);
                this.state = { isToggleOn: true };

                // This binding is necessary to make `this` work in the callback
                this.handleClick = this.handleClick.bind(this);
            }

            handleClick(e) {
                this.setState(prevState => ({
                    isToggleOn: !prevState.isToggleOn
                }));
            }

            render() {
                return t7`
            <div>
              <h2>Inner-${this.props.name}</h2>
              <button onClick=${this.handleClick}>
                    ${this.state.isToggleOn ? 'ON' : 'OFF'}
              </button>
            </div>
          `
            };
        };
        Inner.displayName = "Inner";
        Inner.propTypes = {
            name: React.PropTypes.string
        };

        t7.assign({
            "Wrapper": Wrapper,
            "Inner": Inner
        });

        ReactDOM.render(
            t7`<Wrapper name="YSG"/>`,
            document.getElementById('root')
        );
    });
}

[trueadm]

@DrYSG You're totally right and I'm eager to add maintainers to this project to help with all these areas, if you'd like to contribute (as I really lack the time these days), please feel free to jump onto the Inferno Slack and ping me there when I'm around. https://inferno-slack.herokuapp.com/ (t7 and Inferno share the same slack).

[DrYSG]

Unfortunately, my company blocks Slack from our offices.