I am using reactJS and following file is the client side code which i later bundle using browserify.
I am able to create elements such as check box input etc. but i am having issue while creating element for Router.
This is ok -
React.createElement('input', { ref: 'done', type: 'checkbox', defaultChecked: this.state.done, onChange: this.onChange })
I am having issue with below code -
var React = require('react');
var ReactDOM = require('react-dom');
var TodoItem = require('../lib/components/todo-item');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var browserHistory = require('react-router').browserHistory;
var renderTarget = document.getElementById('content');
TodoItem.component = React.cloneElement(TodoItem.component, {done: false, name: 'Write Tutorial'});
var TodoItemFactory = React.createFactory(TodoItem.component);
ReactDOM.render(
React.createElement(
Router,
{ history: browserHistory },
React.createElement(Route, {path: "/", component: TodoItemFactory })
),
renderTarget);
In the browser at ReactDOM.render ... the error is reported as -
warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of
bound.
For reference - lib/components/todo-item.js -
'use strict';
var React = require('react');
var TodoComponent = React.createClass({
displayName: 'TodoItem',
/**
* Lifecycle functions
**/
getInitialState: function getInitialState() {
return { done: this.props.done };
},
componentDidMount: function componentDidMount() {},
render: function render() {
return React.createElement(
'label',
null,
React.createElement('input', { ref: 'done', type: 'checkbox', defaultChecked: this.state.done, onChange: this.onChange }),
this.props.name
);
},
/**
* Event handlers
**/
onChange: function onChange(event) {
this.setDone(event.target.checked);
},
/**
* Utilities
**/
setDone: function setDone(done) {
this.setState({ done: !!done });
}
});
module.exports.component = TodoComponent;
TodoItemundefined after it is required? If so, try adding ".default" to the end of it's require statement.TodoItem.componentwith the cloned element - that could be where the undefined slipped in.