React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by helgatheviking

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="root"></div>

Babel + JSX

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      members: [
        {
          id: 1,
          name: "Jim",
          display: true
        },
        {
          id: 2,
          name: "John",
          display: false
        },
        {
          id: 3,
          name: "Sarah",
          display: false
        },
        {
          id: 4,
          name: "Mary",
          display: true
        }
      ]
    };
    this.numRows = 0;
  }

  render() {
    const membersToRender = this.state.members.filter(member => member.display)
    const numRows = membersToRender.length
    return (
      <div>
        <p>Number of rows = {state.members.length}</p>
        {membersToRender.map((member) => {
            return <p>{ member.name }</p>
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));