Material UI Base Fiddle

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>

Babel + JSX

const { RaisedButton, MuiThemeProvider, getMuiTheme, Slider, Card, IconButton} = MaterialUI;

 class DynamicCardExample extends React.Component {
 
   constructor(props) {

    	super(props);
      this.state = ( {
        min: 0,
        max: 100,
        value: 0,
        cardCount:1
      })
      
      this.addCard = this.addCard.bind(this);
      this.addMoreCards = this.addMoreCards.bind(this);
      this.removeCards = this.removeCards.bind(this);
    }
  
  render() {
    return (
      <div style={{width: '50%', margin: '0 auto'}}>
              
              {this.cards()}
        <RaisedButton label="+ Add Cards" onClick={this.addMoreCards}/>
        {'         '}
        <RaisedButton label="- Remove Cards" onClick={this.removeCards}/>
      </div>
    );
  }
  
  addMoreCards(){
    var cardCount = this.state.cardCount;
    this.setState({cardCount: cardCount + 1})
  }
  
   removeCards(){
    var cardCount = this.state.cardCount;
    this.setState({cardCount: cardCount - 1})
  }
  
    addCard(i) {
    return(
    	 <Card style={{float: 'left', padding: 16, margin: 32, width: 300}}>
            <h2>This is Card + {i}</h2>
       </Card>)
    }
    
   cards() {
    var rows = [];
    var cardCount = this.state.cardCount;
    for (var i=0; i < cardCount; i++) {
      rows.push(this.addCard(i))
    }
    return rows
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <DynamicCardExample />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);