Preview:
<select
    className="form-control form-control-sm"
    id="assettype_id"
    disabled={!types ? 'disabled' : ''}
    onChange={this.handleChange}
    value={details.assettype_id || ''}
>
    <option value="0">Choose Type...</option>
    {popularTypes.length
        ? popularTypes.map((r, key) => (
                <Fragment key={r.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- POPULAR ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={r.ID}>
                        {r.Name}
                    </option>
                </Fragment>
            ))
        : null}
    {types.length
        ? types.map((t, key) => (
                <Fragment key={t.id}>
                    {key === 0 && (
                        <option value="0" disabled>
                            --- ALL ITEMS ---
                        </option>
                    )}
                    <option key={key.Id} value={t.ID}>
                        {t.Name}
                    </option>
                </Fragment>
            ))
        : null}
</select>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter