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@15.6.2/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script>
<div id="container"></div>
Babel + JSX
class ControlledSelect extends React.Component {
render() {
console.log(this.props.items);
return (
<select
onChange={(evt) => this.props.onChange(evt.target.value)}
>
{Object.entries(this.props.items)
.map(([value, isSelected]) => (
<option key={value} value={value}>
{isSelected && '(Y) '}
{value}
{'Some string'}
</option>
))}
</select>
)
}
}
class App extends React.Component {
state = {
items: {
a: false,
b: false,
}
}
render() {
return (
<ControlledSelect
items={this.state.items}
onChange={v => {
this.setState({
items: {
...this.state.items,
[v]: true,
}
});
}}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('container'));