React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.test-table {
  color: black;
  background-color: yellow;
  text-align: left;
}

td,th {
  border: 1px solid black;
}

td button {
  width: 100%;
  height: 100%;
}

JavaScript 1.7

const data = [
	{
    name: 'Kev',
    monday: {
      class1: {
        id: 0,
        classTitle: 'abc',
        number: 'class1',
        info: {
          time: 1,
          classSize: 2,
        }
      },
      class2: {
        id: 1,
        classTitle: 'def',
        number: 'class2',
        info: {
          time: 1,
          classSize: 2,
        }
      }
    },
    tuesday: {
      class1: {
        id: 2,
        classTitle: 'ghi',
        number: 'class1',
        info: {
          time: 1,
          classSize: 2,
        }
      },
      class2: {
        id: 3,
        classTitle: 'jkl',
        number: 'class2',
        info: {
          time: 1,
          classSize: 2,
        }
      }
    },
  },
  {
    name: 'Josh', 
    monday: {
      class1: {
        id: 4,
        classTitle: 'mno',
        number: 'class1',
        info: {
          time: 1,
          classSize: 2,
        }
      },
      class2: {
        id: 5,
        classTitle: 'pqr',
        number: 'class2',
        info: {
          time: 1,
          classSize: 2,
        }
      }
    },
    tuesday: {
      class1: {
        id: 6,
        classTitle: 'stu',
        number: 'class1',
        info: {
          time: 1,
          classSize: 2,
        }
      },
      class2: {
        id: 7,
        classTitle: 'vwx',
        number: 'class2',
        info: {
          time: 1,
          classSize: 2,
        }
      }
    },
  }
];

class Table extends React.Component {
  constructor(props) {
  	super(props);
    
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick(e) {
    const classTitle = e.target.innerHTML;
    let obj = undefined;
    data.forEach((schedule) => {
    	['monday', 'tuesday'].map((day) => {
        const classes = schedule[day];
        return Object.keys(classes).forEach((c) => {
        	const cls = classes[c];
        	if (cls.classTitle === classTitle) {
          	obj = cls;
          }
        });
      })
    });
    
   ...