Using for loop render some Html elements in React render function - reactjs

Question

I am trying to render some html using for loop. Every thing work fine but the html prints like a string inside that UL element I dont know what I did wrong pls help me with this. I am new to this React Js thing.
My Script
const Pagination = React.createClass({
getInitialState: function () {
return {
"page": {
"size": 100,
"limit": 30,
"offset": 0,
"number": 1
}
};
},
render: function () {
var html = [];
var i = 0;
var className = '';
var noOfPages = 0;
var number = 1;
var page = this.state.page;
if (page) {
noOfPages = parseInt((page.size / page.limit), 10);
for (i; i < noOfPages; i++) {
className = (className === number) ? 'selected' : '';
html.push('<li key=' + {i} + ' className=""><button className="' + {className} + '">' + {i} + '</button></li>');
}
}
return (
<div className="pagination-sec-wrapper">
<form className="pagination-inner-sec-wrapper" id="pagination-form">
<ul className="">
{html}
</ul>
</form>
</div>
);
}
});

Answer 1

That's because you are pushing string values into your HTML array.
html.push('<span key=' + {i} + ' className=""><button className="' + {className} + '">' + {i} + '</button></span>');
You need to push React components instead.
html.push(<span key={i} className="">
<button className={className}>{i}</button>
</span>);
It's important to remember that even though JSX looks like HTML strings, it's really just syntactic sugar for regular Javascript function calls.
The above JSX is just the same as the following JS.
html.push(React.createElement("span", { key: i, className: "" },
React.createElement("button", { className: className }, i)));