JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<!-- <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> -->

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="app"/>

JavaScript

const e = React.createElement;

const container = document.getElementById('app');

const memoizedOptions = Array.from({
  length: 10000
}, (_, i) => e('option', {
  key: `option-${i}`,
  value: `value ${i}`
}))

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: null
    };
  }

  render() {
    return e('div', {}, [e(
      'button', {
        onClick: () => this.setState({
          options: memoizedOptions
        })
      },
      'Click Me'
    ), e('input', {
      list: 'myList'
    }), e('datalist', {
      id: 'myList'
    }, [
      this.state.options
    ])]);
  }
}

ReactDOM.render(e(App), container);