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')
);