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.
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() .
Explanation: The Babel is the tool used to turn into createElement calls also babel is a transpiler that is conversion.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With