JSFiddle - React, Tailwind, and code Playground

by aninaslyan

React

import React, { Component } from "react";
import classes from "./Select.css";
import SelectOptions from "./SelectOptions/SelectOptions";
import Input from "../Input/Input";

class Select extends Component {
  state = {
    isOpen: false,
    selectOptions: [
      { categoryName: "Rossia Mall", isChecked: false },
      { categoryName: "Կապ", isChecked: false },
      { categoryName: "Անվադողեր", isChecked: false },
      { categoryName: "Խանութներ", isChecked: false },
      { categoryName: "Տուրիզմ", isChecked: false },
      { categoryName: "Անվադողեր", isChecked: false },
      { categoryName: "Այլ", isChecked: false }
    ]
  };

  openOptionsHandler = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  renderOptions() {
    return Object.keys(this.state.selectOptions).forEach(index => {
      const option = this.state.selectOptions[index];
      console.log(option.categoryName)
      return (
        <div>
          {option.categoryName}
        </div>
      );
    });
  }

  render() {
    return (
      <div className={classes.Select}>
        <Input
          type="text"
          placeholder="Ընտրեք բաժինը"
          classIcon="fa fa-sort-down"
          onClick={this.openOptionsHandler}
        />
        {this.state.isOpen ? this.renderOptions() : null}
      </div>
    );
  }
}

export default Select;