React Base Fiddle (JSX)

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

HTML

<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>

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

Babel + JSX

class Hand extends React.Component {
  render () {
		return <span> Milky way galaxy</span>
  }
}

class Need extends React.Component {
constructor(props) {
    super(props);
    this.processNeed = this.processNeed.bind(this);
		this.state = {
      why: " ",
      howMuch: 0
    };
}

processNeed(e){
    e.preventDefault();
    const why=this.why.value;
    const howMuch=this.howMuch.value;
    this.setState({
        why:why,
        howMuch:howMuch
    });
}

render(){
  return(
    <div className ="need">
      <form onSubmit = {this.processNeed}>
        <input type="text" ref= {ref => this.why = ref}/>
        <input type="text" ref= {ref => this.howMuch = ref}/>
        <input type="submit"/>
      </form>
      <div>
        <h1>{this.state.why}</h1>
        <h1>{this.state.howMuch}</h1>
      </div>
    </div>            
    )
 }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.processHand = this.processHand.bind(this);
    this.addNeed = this.addNeed.bind(this);
		this.state = {
      inhandMoney : " ",
      needArray: []
    };
  }

  processHand(e){
    e.preventDefault();
    const handMoneyReceived = this.handMoney.value;
    this.setState({
        inhandMoney: handMoneyReceived
    });     
  }

  addNeed(e){
    e.preventDefault();
    this.state.needArray.push(<Need key={this.state.needArray.length}/>);
    this.setState({
        renderNeed:true
    });
  }
  renderNeedArray () {
		return this.state.needArray.map(function(item) { return item});
  }

  render() { 
    const passNeed = (    
            <Need/>   
      );
    return(
        <div>
          <div className ="hand">
            <form onSubmit = {this.processHand}>
              <input type="text" ref= {ref => this.handMoney = ref}/>
              <input type="submit"/>
            </form>
            <Hand handMoney = {this.state.inhandMoney}/>
            <Need/>
          </div>
          {this.state.renderNeed &&...