8

My simple component:

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

My second component that I want to 'render' the first component 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 component = React.createElement(this.props.action.component);
        ReactDOM.render( component, document.getElementById('content'));
    }
})

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

Uncaught Invariant Violation: Invalid tag:

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

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 'component' for "<AddProductForm/>" it works fine, but using the createElement for instantiate the object before the render doesn't.

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

1 Answer 1

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 component = React.createElement(AddProductForm);
        ReactDOM.render( component, 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.component is in your case. I have created a small fiddle. Maybe we can work this out. https://jsfiddle.net/walkerrsmith/htaca7fa/

4
  • In my case, this.props.action.component is dynamically passed string which references what sub component should I render. The problem is that somehow the createElement can't instance the correct element, passing 'HeaderAction ' or even '<HeaderAction />
    – Pavarine
    Feb 11, 2016 at 23:22
  • This may be useful. Keep reading past the first couple of responses. github.com/facebook/react/issues/3365. Maybe the comment github.com/facebook/react/issues/3365#issuecomment-163397564 helps Feb 11, 2016 at 23:31
  • 3
    Walker is correct. React.createElement can take a string of a common element tag, or the class object of the react component. facebook.github.io/react/docs/glossary.html Feb 12, 2016 at 0:11
  • @CHBuckingham ...furthermore, if you mistakenly provide a string instead of the class object, React will attempt to render a tag with that name instead of your shiny component. Silently. This happened to me, because I had to start the rendering somewhere I could not use JSX, and didn't know how to do it properly.
    – Septagram
    Aug 23, 2016 at 17:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.