React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.cash-list-row {
	display: inline-block;
}

JavaScript 1.7

var bills =
	 [{id: 1, name: "$20", amount: 20}, 
		{id: 2, name: "$10", amount: 10}, 
		{id: 3, name: "$5", amount: 5}, 
		{id: 4, name: "$2", amount: 2},
		{id: 5, name: "$1", amount: 1}
];
 
class Parent extends React.Component {
	constructor(props) {
		super()
		this.state = {billFinalTotal: []}
	this.handleCashInput = this.handleCashInput.bind(this)
	} 
	
	
	handleCashInput(newBillFinalTotal) {
		const cashTemp = this.state.billFinalTotal.concat(newBillFinalTotal)

		this.setState({
			billFinalTotal: cashTemp
		})
	}
	
  render () {
   const billsNode = bills.map((bill) => {
  		return (
  			<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} />
  		)
  	})
    return (
			<div>
				<div> {billsNode} </div>
				<BillFinalTotal billFinalTotal={this.state.billFinalTotal} />
			</div>
		);
  }
}

var CashItemsList = React.createClass ({
	getInitialState() {
    return {billSubTotal: '0'}
  },
  changeBillSubTotal(newBillSubTotal) {
  	this.setState({ billSubTotal: newBillSubTotal})
		this.props.onChange(newBillSubTotal)
  },
  render () {
  	const { bill } = this.props
    return(
			<div>
				<div className="cash-list-row">
					<CashItem key={bill.id} bill={bill} onChange={this.changeBillSubTotal} />
				</div>
				<div className="cash-list-row">
					<BillSubTotal billSubTotal={this.state.billSubTotal} />
				</div>
			</div>
    )
  }
 })
 
var CashItem = React.createClass ({
	handleInput(event) {
    let count = event.target.value
    let billSubTotal = this.props.bill.amount * count
    this.props.onChange(billSubTotal)
  },
  render() {
  	const { bill } = this.props
    return (
    	<div>
      	<form>
					<label>{bill.name}</label> x
        	<input type="number" onChange={this.handleInput} placeholder="#" />
        </form>
      </div>
    )
  }
 })
 
class BillSubTotal extends React.Component {
	 render () {
			return (
				<div>= ${this.props.billSubTotal}</div>
			)
	 }
}
 
class BillFinalTotal extends React.Component...