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="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#root {
  display:flex;
  color:#444;
}

.buttonContainer {
  display:flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top:1.5rem;
}

JavaScript 1.7

const DATA = [
  'Jazz', 'Top 40', 'Country', 'Blues', 'Easy Listening', 'Rock', 'Classical', 'Chillout', '80s', 'Oldies','Dance', 'Ambient', 'Reggae', 'Trance', 'Hip Hop', 'Smooth Jazz', '70s', 'House', 'Lounge', 'Drum and Bass', 'Metal', 'Meditation', 'Heavy Metal', '60s', 'Techno', 'Pop', 'Soul', '90s', 'Psytrance', 'Latin', 'Funk', 'Rap', 'Bollywood', '50s', 'Hindi', 'Rockabilly', 'Minimal', 'Greek', 'Comedy', 'Alternative', 'Reggaeton', 'New Age', 'Salsa', 'Bluegrass', 'edm', 'Manele', 'Indie', 'Japanese', 'Dancehall', 'Classic Rock', 'Disco', 'Dubstep', 'Folk', 'goth', 'Punk', 'Garage', 'New Wave']


class App extends React.Component {
  render() {
    return (
      <div>
        <Title />
        <ButtonContainer data={DATA} />
      </div>
    )
  }
}

class Title extends React.Component {
  render () {
    return (
      <div>Popular Genres</div>
    )
  }
}

class ButtonContainer extends React.Component {
  constructor(props) {
    super(props);
  };
  render() {
    let items = this.props.data;
    let anItem = items.map((item, i) => {
      return (
      <button className='singleButton'>{item}</button>
    )
    });
    return (<div className='buttonContainer'>{anItem}</div>)
  }
}
 
ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

function applyRowClasses(buttonSelector,rowClassBase){
  //The selector passed as the first argument should select all elements for which
  //  it is desired to have the class applied.
  //The second argument is the text portion of the class to be applied. The row
  //  number (0 at the top) will be appended to that text for the class of each row.
  //  (e.g. 'row' will result in classes 'row0', 'row1', 'row2', etc.)
  var children = document.querySelectorAll(buttonSelector);
  var replaceRowRegExp = new RegExp('\\s*' + rowClassBase + '\\d+(\\b|$)','g');
  var child;
  var testColor = ['red','orange','yellow','green','blue','purple','crimson'
                  ...