Create HTML from for loop in JSX with React.js

Question

I want to crate HTML in for loop in JSX. Here is what my try look likes

    function renderTemplates(templates){
           var html = [];
           var templateDiv = [];
           var count  = 0;
           for(var identifier in templates){  
             if(templates.hasOwnProperty(identifier)){
               var templateDetails = templates[identifier];
               if(count == 0){
                  html.push(<Row>);
               }
               cols = <Col md={6}>ff
                          </Col>;
               html.push(cols);
               if(count == 0){
                      html.push(</Row>);
               }
               count = (count === 1)?0:1;
             }
        } 
        return html;
     }

I know this is wrong syntax but can't figure out how to do it. Basically I have some data and want to create html in fashion that 2 divs lies horizontaly in 1 row.

Answer 1

On a recent project I did something similar, but with table rows/columns.

var TableBody = React.createClass({
  render: function(){
    var columns = this.props.columns;
    var data = this.props.data;

    return (
      <tbody>
        {data.map(function(item, idx){
          return <TableRow key={idx} data={item} columns={columns}/>;
        })}
      </tbody>
    )
  }
});

My <TableRow /> component looks like:

var TableRow = React.createClass({
  render: function() {
    var columns = this.props.columns;
    var data = this.props.data;
    var td = function(item) {

        return columns.map(function(c, i) {
          return <td key={i}>{item[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr key={data}>{ td(data) }</tr>
    )
  }
});