import React, { Component } from 'react';

class DropdownStructuredComponent extends Component {
	onChange = (state) => {
	    console.log('onChange to Dropdown component')
	}

	render = () => {
		return (
			<span className='sf-subfield' {...this.props.attributes}>
					<select onFocus={this.props.handleDropdownFocus} onChange={this.props.handleDropdownSelection}>
						{this.props.items.map(function(item, index) {
							return <option key={item} value={item}>{item}</option>;
						})}
					</select>
				</span>
		);
	}
}

export default DropdownStructuredComponent;
import React, { Component } from 'react';

class DropdownStructuredComponent extends Component {
	onChange = (state) => {
	    console.log('onChange to Dropdown component')
	}

	render = () => {
		return (
			<span className='sf-subfield' {...this.props.attributes}>
					<select onFocus={this.props.handleDropdownFocus} onChange={this.props.handleDropdownSelection}>
						<option selected disabled hidden>Select</option>
						{this.props.items.map(function(item, index) {
							return <option key={item} value={item}>{item}</option>;
						})}
					</select>
				</span>
		);
	}
}

export default DropdownStructuredComponent;
Set initial state of drop down to be placeholder text (this fixes the issue of not being able to select the first entry in the list when the first entry is the default value on initial page render)
Set initial state of drop down to be placeholder text (this fixes the issue of not being able to select the first entry in the list when the first entry is the default value on initial page render)
