My simple ponent:

var AddProductForm = React.createClass({
    render: function(){
        return(
            <form >
                <input type='text' placeholder='lablbalbalbal'/>
            </form>
        )
    }
})

My second ponent that I want to 'render' the first ponent in some determined div via onClick:

var HeaderAction = React.createClass({
    render: function(){
        return(
            <button type="button" onClick={this.handleClick}  className="btn border-slate text-slate-800 btn-flat"><i className={this.props.icon + " position-left"}></i>{this.props.name}</button>
        )
    },
    handleClick: function(){
        var ponent = React.createElement(this.props.actionponent);
        ReactDOM.render( ponent, document.getElementById('content'));
    }
})

When I click my 'HeaderAction' ponent, an error occurs:

Uncaught Invariant Violation: Invalid tag:

The console.log() from my 'ponent' :

Object {$$typeof: Symbol(react.element), type: "<AddProductForm/>", key: null, ref: null, props: Object…}
$$typeof: Symbol(react.element)
_owner: null
_self: null
_source: null
_store: Object
key: null
props: Object
ref: null
type: "<AddProductForm/>"
__proto__: Object

If in the render call I change 'ponent' for "<AddProductForm/>" it works fine, but using the createElement for instantiate the object before the render doesn't.

My simple ponent:

var AddProductForm = React.createClass({
    render: function(){
        return(
            <form >
                <input type='text' placeholder='lablbalbalbal'/>
            </form>
        )
    }
})

My second ponent that I want to 'render' the first ponent in some determined div via onClick:

var HeaderAction = React.createClass({
    render: function(){
        return(
            <button type="button" onClick={this.handleClick}  className="btn border-slate text-slate-800 btn-flat"><i className={this.props.icon + " position-left"}></i>{this.props.name}</button>
        )
    },
    handleClick: function(){
        var ponent = React.createElement(this.props.action.ponent);
        ReactDOM.render( ponent, document.getElementById('content'));
    }
})

When I click my 'HeaderAction' ponent, an error occurs:

Uncaught Invariant Violation: Invalid tag:

The console.log() from my 'ponent' :

Object {$$typeof: Symbol(react.element), type: "<AddProductForm/>", key: null, ref: null, props: Object…}
$$typeof: Symbol(react.element)
_owner: null
_self: null
_source: null
_store: Object
key: null
props: Object
ref: null
type: "<AddProductForm/>"
__proto__: Object

If in the render call I change 'ponent' for "<AddProductForm/>" it works fine, but using the createElement for instantiate the object before the render doesn't.

• javascript
• reactjs

Share Follow asked Feb 11, 2016 at 22:23 PavarinePavarine 72633 gold badges1515 silver badges3131 bronze badges 2

• What is this.props.action.ponent? At the time the render fails? – Cooper Buckingham Commented Feb 11, 2016 at 23:54
• this.props.action.ponent resolves to a string, no fails. – Pavarine Commented Feb 12, 2016 at 1:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

var AddProductForm = React.createClass({
    render: function(){
        return(
            <form >
                <input type='text' placeholder='lablbalbalbal'/>
            </form>
        )
    }
})

var HeaderAction = React.createClass({
    render: function(){
        return(
            <button type="button" onClick={this.handleClick}</button>
        )
    },
    handleClick: function(){
        var ponent = React.createElement(AddProductForm);
        ReactDOM.render( ponent, document.getElementById('content'));
    }
})
var mount = document.getElementById('container');
ReactDOM.render(React.createElement(HeaderAction), mount)

I do not have an answer for you, however this seems to work. I do not know what this.props.action.ponent is in your case. I have created a small fiddle. Maybe we can work this out. https://jsfiddle/walkerrsmith/htaca7fa/