Binding functions in React templates
<p>I want to create a simple <code>Wizard</code> component. I don't know how to bind <code>handleChange</code> function for <code>onChange</code> input event and how to get into passed context (which is my custom class defined somewhere and instanced in <code>ParentClass</code>).</p>

<blockquote>
  <p>Uncaught SyntaxError: Unexpected token }</p>
</blockquote>

<p>Here's my <code>Wizard</code> component and simple template that I created to test it:</p>

<pre><code>export class ParentClass extends React.Component {
    render() {
        let template = `&lt;input value=${context.testVal} onChange=${context.handleChange.bind(context, event)}&gt;`; // how to invoke this code inside Wizard using TestContext class???
        let testContext = new TestContext();

        return (
            &lt;Wizard template={template} context={testContext} /&gt;
        );
    }
}

export class TestContext {
    testVal = null;

    constructor() {
        this.testVal = 10;
    }

    handleChange(e) {
        console.log(e);
    }
}

export class Wizard extends React.Component {
    context: null;

    constructor(props) {
        super(props);

        this.context = this.props.context;
    }

    render() {
        return (
            &lt;div dangerouslySetInnerHTML={{__html: this.props.template}}&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>I use <code>ES2015</code> and <code>Babel</code> for compiling.</p>

<p><strong>[edit]</strong></p>

<p>I edited my code and question. I see now what u guys mean saying "remove $".</p>

<p>U didn't understand me. I want to declare <code>HTML</code> code with some variable bindings (as a string) + some context class that should contain all the logic for declared template. When I have those, I want to pass them as params into <code>Wizard</code> and use the template to replace the <code>HTML</code> of this <code>Wizard</code> (executing <code>JSX</code> in the same time). In other words. I want generic mechanism for dynamic templates in <code>Wizard</code> component.</p>