Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React render not working with createElement

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.

like image 594
Pavarine Avatar asked Feb 11 '16 22:02

Pavarine


People also ask

Can you use createElement in React?

createElement()Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span' ), a React component type (a class or a function), or a React fragment type. Code written with JSX will be converted to use React.createElement() .

What take JSX and turn it into createElement?

Explanation: The Babel is the tool used to turn into createElement calls also babel is a transpiler that is conversion.

Which component do we have to pass to the ReactDOM render () method?

render() The first argument is the element or component we want to render, and the second argument is the HTML element (the target node) to which we want to append it. Generally, when we create our project with create-react-app , it gives us a div with the id of a root inside index.


1 Answers

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/

like image 71
walkerrandophsmith Avatar answered Oct 01 '22 01:10

walkerrandophsmith