JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const options = ['option a', 'option b'];

class App extends React.Component {
	static propTypes = {
  	name: PropTypes.string,
  };
  
  constructor(props) {
  	super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { optionsAreActive: true }
  }
  
  handleClick() {
    this.setState((prevState) => ({ optionsAreActive: !prevState.optionsAreActive }))
  }
  
  render() {
  	return (
    	<div>
    	  <h1>This is a simple repro of the bug affecting inline JSX strings in option tags</h1>
        <button onClick={ this.handleClick }>Remove (active) string from options</button>
        <br />
        <select>
          { options.map((option) => <option key={ option + '-' + this.state.optionsAreActive }>{ option } { this.state.optionsAreActive && '(active)' } </option>) }
        </select>
    	</div>
    );
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));