{"size": 665, "ext": "js", "max_stars_repo_path": "src/components/interface/StatesSelect.js", "max_stars_repo_name": "gabidavila/congress-index", "max_stars_repo_stars_event_min_datetime": "2018-02-19T15:55:07.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-27T12:05:00.000Z", "max_issues_repo_path": "src/components/interface/StatesSelect.js", "max_issues_repo_name": "gabidavila/congress-index", "max_issues_repo_issues_event_min_datetime": "2019-12-28T03:05:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T02:23:01.000Z", "max_forks_repo_path": "src/components/interface/StatesSelect.js", "max_forks_repo_name": "gabidavila/congress-index", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 11, "max_forks_count": null, "avg_line_length": 28.9130434783, "max_line_length": 151, "alphanum_fraction": 0.6721804511}
import React from 'react';
import { Dropdown } from 'semantic-ui-react';

const StatesSelect = (props) => {
  const handleChange = (event, data) => {
    props.onChangeHandler('selectedState', data.value);
  };

  const statesList = [{
    key: 'A',
    value: 'A',
    text: 'All States or Territories',
  }, ...props.states.map((state) => {
    return { key: state.attributes.state, value: state.attributes.state, text: state.attributes['state-full'] };
  })];

  return (
    <Dropdown placeholder='Select State or Territory' value={props.selectedValue} fluid search selection onChange={handleChange} options={statesList}/>
  );
};

export default StatesSelect;
