{"size": 802, "ext": "js", "max_stars_repo_path": "src/components/editable/EditableSelect.js", "max_stars_repo_name": "atakanaytan/rental-booking-app", "max_stars_repo_stars_event_min_datetime": "2021-05-27T12:59:12.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-27T12:59:12.000Z", "max_issues_repo_path": "src/components/editable/EditableSelect.js", "max_issues_repo_name": "atakanaytan/rental-booking-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/editable/EditableSelect.js", "max_forks_repo_name": "atakanaytan/rental-booking-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.6551724138, "max_line_length": 71, "alphanum_fraction": 0.4975062344}

import React from 'react';
import EditableComponent from './EditableComponent';

export class EditableSelect extends React.Component {

    renderOptions = (options) => 
        options.map(option =>
            <option key={option} value={option}>{`${option}`}</option>
        );

     render() {
        const { className, options } = this.props;
        return(
          <EditableComponent 
           {...this.props}
            renderComponent={(value, onChange, onKeyDown) => 
              <select
                onKeyDown={onKeyDown} 
                onChange={onChange}
                className={`editable-item ${className}`}
                value={value}>
                {this.renderOptions(options)}
              </select>
           }/>
        )
    }
}
