JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

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>

JavaScript 1.7

class Intro extends React.Component {
  constructor() {
    super();
    this.state = {
      cat1: [{
        component: 'First...',
        id: 1
      }, {
        component: 'Second...',
        id: 2
      }, {
        component: 'Third...',
        id: 3
      }],
      cat2: [{
        component: '1...',
        id: 1
      }, {
        component: '2...',
        id: 2
      }, {
        component: '3...',
        id: 3
      }]
    }
  }

  render() {
    return ( < div >
      < Dropdown cat = {
        this.state.cat1
      }
      /> < Dropdown cat = {
        this.state.cat2
      }
      /> < /div>
    );
  }
}

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.getMarkOptions = this.getMarkOptions.bind(this);
  }

  getMarkOptions() {
    return this.props.cat.map(function(mark, i) {
      return <option key = {
        mark.id
      }
      value = {
        mark.component
      } > {
        mark.component
      } < /option>
    });
  }

  render() {
    return ( < select ref = "selectMark"
      className = {
        "edit-select form-control"
      }
      onChange = {
        this.onChange
      } > {
        this.getMarkOptions()
      } < /select>      
    );
  }
}


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