Firerating Door List React Component

Firerating Door List React Component

by jeremy tammik

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

th { text-align: left }
table, th, td { border: 1px solid black; }
table { border-collapse: collapse }

JavaScript 1.7

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
);