import React from "react";

var values;

class DropDown extends React.Component {
  constructor() {
    super();
    this.state = {
      options: [],
    };
  }

  componentDidMount() {
    this.fetchOptions();
  }

  fetchOptions() {
    fetch("/getStreamNames")
      .then((res) => {
        return res.json();
      })
      .then((json) => {
        values = json;
        let arr = [];
        values.forEach((element) => {
          arr.push(element.streamName);
        });
        this.setState({ options: arr });
      });
  }

  state = { value: "Large" };

  handleChange = (event) => {
    this.setState({
        value: event.target.value
    });
}

  render() {
    return (
      <div className="drop-down">
        <select>
          {this.state.options.map((option, key) => (
            <option key={key}>{option}</option>
          ))}
        </select>
      </div>
    );
  }
}

export default DropDown;