Passing a React class as a prop no longer works in 0.13.*

[ezequiel]

Hi,

I'm trying to run the following code using the latest version of React:

var MyComponent = React.createClass({
    render: function() {
        return (
            <div>
                <this.props.template 
                    data='test'
                />
            </div>
        );
    }
});

var App = React.createClass({
    render: function() {
        return (
            <MyComponent 
                template={this.template}
            />
        );
    },

    template: React.createClass({
        render: function() {
            return <p>{this.props.data}</p>;
        }
    })
});

React.render(<App />,  document.body);

However, an error is thrown once the code is ran: "Uncaught TypeError: Cannot read property 'mountComponent' of undefined"

The above code functions as expected in React 0.12.2. Someone figured out this is due to a change in the way React 0.13.* classes autobinds all of its methods. Therefore, changing App's render method to this fixes the issue:

    render: function() {
        var tmpl = React.createClass({
            render: function() {
                return <p>{this.props.data}</p>;
            }
        });

        return (
            <MyComponent 
                template={tmpl}
            />
        );
    }

[zpao]

This doesn't seem intentional. I also can't repro in master. If we can track down what fixed this, it might be worth backporting into 0.13. cc @sebmarkbage, @spicyj

[sebmarkbage]

This might have something to do with the binding itself. We used to effectively call new this.template.type() which is not a bound function. However, we now switched to calling new this.template() which is a bound function. However, calling native .bind() should not bind this for the Construct operation which is invoked when you call new on a function.

If that is the problem, then this should still work in the production build, if no polyfill overrides .bind().

[sebmarkbage]

Actually, this particular issue is probably more related to #3638 but there might be secondary issues with this pattern after that.

[syranide]

For posterity, never ever do:

    render: function() {
        var tmpl = React.createClass({
            render: function() {
                return <p>{this.props.data}</p>;
            }
        });

        return (
            <MyComponent 
                template={tmpl}
            />
        );
    }

You're creating a new class every render which is slow and doesn't reconcile.

[sophiebits]

To be clear, you can do this instead:

var Template = React.createClass({
    render: function() {
        return <p>{this.props.data}</p>;
    }
});

var App = React.createClass({
    render: function() {
        return <MyComponent template={Template} />;
    }
});

[zpao]

This is fixed by #3638

[basharov]

@spicyj Your solution worked for me, but I have a question.
I do it in a similar way as your example is. Say, in place of Template I want to put a React class, like you do, or just a set of DOM elements, like <div> some content</div>.

In case I have it as a class, I run it as <Template someprops={someprops} /> inside MyComponent, but if I have it as a DOM element, then it's not a function, and should be put as it is.

The question is - should I check the type of Template variable and depending on it render it differently?

Thanks!

[sophiebits]

If Template is 'div', then <Template /> will render a div. You can also pass <MyComponent element={<div>some content</div>} /> and return this.props.element inside MyComponent.