var Doors = React.createClass({
render: function() {
var doors = eval(this.props.doors);
var table_records = doors.map(function (x) {
return (<tr><td>{x.level}</td><td>{x.tag}</td><td>{x.firerating}</td></tr>);
});
return <table>
<tr>
<th>Level</th>
<th>Tag</th>
<th>Fire rating</th>
</tr>
{table_records}
</table>;
}
});
React.render(
<Doors doors="[{'level':'Level 1','tag':'Tag 1','firerating':10}, {'level':'Level 2','tag':'Tag 2','firerating':20}]" />,
document.body
);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
th { text-align: left }
table, th, td { border: 1px solid black; }
table { border-collapse: collapse }
External resources loaded into this fiddle: