@shakthillc/components/src/Dropdown/Dropdown.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./Dropdown.module.css";

export default class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: props.selectedOption
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    let { onChange } = this.props;
    this.setState({ selectedOption: e.target.value });
    onChange && onChange(e.target.value);
  }

  render() {
    let { options, disabled = false } = this.props;
    const { selectedOption } = this.state;
    let html = options.map((obj, i) => {
      return (
        <option key={i} className={style.optionStyle} value={obj.value}>
          {obj.label}
        </option>
      );
    });
    return (
      <div>
        <select
          className={style.selectStyle}
          value={selectedOption}
          onChange={this.handleChange}
          disabled={disabled}
        >
          <option value="">select</option>
          {html}
        </select>
      </div>
    );
  }
}

Dropdown.defaultProps = {
  options: [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" }
  ],
  disabled: false,
  dataId: "dropdownComp",
  selectedOption: ""
};
Dropdown.propTypes = {
  dataId: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  options: PropTypes.array,
  selectedOption: PropTypes.string
};