How to render ReactElement in ReactClass? - reactjs

Question

I want to render some ReactElement in React.creatClass, but it show nothing. Here is my code:
var Users=React.createClass({
render:function () {
var id=React.createElement('span',null,"hello");
var name=React.createElement('input',null,null);
var updateBtn=React.createElement('button',null,'Change');
var deleteBtn=React.createElement('button',null,'Delete');
var ent=React.createElement('br',null,null);
return (
React.createElement('div',{},[id,name,updateBtn,deleteBtn,ent])
);
}
});
And I use this ReactClass in other function like:
var showUsers=React.createElement('Users',{key:"ka",id:"users"},null);
ReactDOM.render(
showUsers,
document.getElementById('show')
);
Why does it not work? Any help will be appreciate!!

Answer 1

Before providing a solution to your problem, I have to say that what you are trying to do here is rather odd. There are many strange and/or bad practices here and you might want to reconsider reading up on tutorials and the documentation before continuing.
The createClass() approach is deprecated as of version 15.5.
You are not using JSX which, while still technically valid, is rather peculiar as it makes coding much easier. Using React without JSX in larger projects might become incredibly cumbersome.
You don't need to provide a key to your Users component, and probably not an id either.
That said, the reason your code doesn't work is because you are passing in a String to the createElement() function instead of the reference to your Users component. Remove the quotes, and it will work:
var Users=React.createClass({
render:function () {
var id=React.createElement('span',null,"hello");
var name=React.createElement('input',null,null);
var updateBtn=React.createElement('button',null,'Change');
var deleteBtn=React.createElement('button',null,'Delete');
var ent=React.createElement('br',null,null);
return (
React.createElement('div',{},[id,name,updateBtn,deleteBtn,ent])
);
}
});
var showUsers=React.createElement(Users, {key:"ka",id:"users"},null);
ReactDOM.render(
showUsers,
document.getElementById('show')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="show"></div>
Here's a snippet of how I would write your app:
class Users extends React.Component {
render() {
return (
<div>
<span>hello</span>
<input />
<button>Change</button>
<button>Delete</button>
<br />
</div>
);
}
}
ReactDOM.render(<Users />, document.getElementById('show'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="show"></div>