adinutzyc21 adinutzyc21 - 1 year ago 68
React JSX Question

Compositing html code in reactjs

I am currently trying to render a table from data in React, and I have this:

import React, { Component, PropTypes } from 'react';

// Column component - represents columns in the table
export default class Table extends Component {
setHtmlHead(data) {
var html = "";
for (var property in data) {
if (data.hasOwnProperty(property)) {
html += "<th>" + data[property] + "</th>";
return "<tr>" + html + "</tr>";

setHtmlBody(data) {
var html = "";
for (var i = 0, len = data.length; i < len; i++) {
var row = data[i];
html += "<tr>";
for (var property in row) {
if (row.hasOwnProperty(property)) {
html += "<td>" + row[property] + "</td>";
html += "</tr>";
return html;

render() {
return (
<table className='table table-bordered'>
<thead dangerouslySetInnerHTML={{ __html: this.setHtmlHead([0]) }} />
<tbody dangerouslySetInnerHTML={{ __html: this.setHtmlBody(, "td") }} />

As you can see, I am doing this mostly wrong, probably (hopefully?). There has to be a way to dynamically add
es in the render function, but I cannot figure it out.

I want to be able to do a for loop, like in the
functions above, but instead of appending strings I want to append html-code. Also, probably inside the

I want to also be able to do something like
<th><Button /></th>
, and have the
render correctly (
is defined in a different jsx file and renders a button, but if I use strings or
, it gets converted to
[Object object]

So, is there a way to composit html-data in React? I know of
but I wasn't able to make it do what I want it to do... especially since I want the last column to be a
so not part of the data (though I guess I could get it there using CSS instead of making it be a column).

Answer Source

In React you would usually do something like this:

setHtmlHead(data) {
    var html = [];
    for (var property in data) {
        if (data.hasOwnProperty(property)) {
            html.push(<th key={property}>{data[property]}</th>);
    return <tr>{html}</tr>;

And then in the main part


This way you're working with actual objects and not just writing raw HTML out. And if you want a Button in the th just put it in there.