{
    slotId: "1",
    initialized: "Y",
    label: "some information about slot 1"
  }

const viewOptions = [
  {
    text: "slot info",
    value: "slotInfo",
    description: "display information about slots"
  }
];

<Dropdown
          value={viewOptions}
        />

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

import {
  Dropdown,
  Form,
  Divider,
  Input,
  Message,
  Loader,
  Table
} from "semantic-ui-react";

import "./styles.css";

var MockAdapter = require("axios-mock-adapter");
var mock = new MockAdapter(axios);

mock.onGet("/slotInfo").reply(200, {
  data: {
    slotInfo: [
      {
        slotId: "1",
        initialized: "Y",
        label: "some information about slot 1"
      },
      {
        slotId: "2",
        initialized: "N",
        label: "some information about slot 2"
      },
      {
        slotId: "3",
        initialized: "Y",
        label: "some information about slot 3"
      },
      {
        slotId: "4",
        initialized: "N",
        label: "some information about slot 4"
      },

      {
        slotId: "5",
        initialized: "N",
        label: "some information about slot 5"
      },

      {
        slotId: "6",
        initialized: "Y",
        label: "some information about slot 6"
      },

      {
        slotId: "7",
        initialized: "N",
        label: "some information about slot 7"
      },

      {
        slotId: "8",
        initialized: "N",
        label: "some information about slot 8"
      },

      {
        slotId: "9",
        initialized: "Y",
        label: "some information about slot 9"
      },

      {
        slotId: "10",
        initialized: "N",
        label: "some information about slot 10"
      },
      {
        slotId: "11",
        initialized: "Y",
        label: "some information about slot 11"
      }
    ]
  }
});

//values for viewOptions dropdown
const viewOptions = [
  {
    text: "slotInfo",
    value: "slotInfo",
    description: "Show slot info"
  }
];

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      viewSelection: "",
      isLoading: true,
      slotId: ""
    };
  }

  handleViewSelection = (e, { value }) => {
    this.setState({ viewSelection: value }, () => {
      console.log("view election --> ", this.state.viewSelection);
    });
  };

  onSlotIdChange = async (e, { value }) => {
    this.setState({ slotId: value, isLoading: false }, () => {
      console.log(
        "chosen slotId updated to state callback -->",
        this.state.slotId
      );
    });

    if (!value) {
      this.handleClear();
      return;
    }
  };

  handleClear = () => {
    this.setState({ slotId: "", isLoading: true }, () => {
      console.log("slotId cleared");
    });
  };

  render() {
    const { viewSelection, isLoading, slotId } = this.state;
    return (
      <div
        style={{ display: "flex", minHeight: "100vh", flexDirection: "column" }}
      >
        <div style={{ flex: 1 }}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              flex: "1"
            }}
          >
            <div style={{ width: "1000px" }}>
              <Divider style={{ marginTop: "7em" }} horizontal>
                View Data
              </Divider>
              <Message style={{ marginTop: "2em" }} info>
                <Message.Header>
                  Want to see more specific information? Log in &nbsp;
                  <a href="/">here</a>.
                </Message.Header>
              </Message>
              <Form.Field style={{ marginTop: "2em" }}>
                <label>Select data to view</label>
                <Dropdown
                  scrolling
                  placeholder="Pick an option"
                  value={viewSelection}
                  fluid
                  selection
                  multiple={false}
                  search
                  options={viewOptions}
                  onChange={this.handleViewSelection}
                />
              </Form.Field>

              {this.state.viewSelection && (
                <div style={{ marginTop: "2em" }}>
                  {viewSelection && viewSelection === "slotInfo" ? (
                    <>
                      <label style={{ display: "block", marginTop: "2em" }}>
                        Select a Slot ID to init
                      </label>
                      <GetSlotIds
                        slotId={slotId}
                        onSlotIdChange={this.onSlotIdChange}
                      />
                    </>
                  ) : null}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class GetSlotIds extends Component {
  constructor(props) {
    super(props);

    this.state = { slotId: "", slotInfo: [] };
  }

  async componentDidMount() {
    await this.getSlotIds();
  }

  getSlotIds = async () => {
    try {
      const { data } = await axios.get("/slotInfo");
      console.log("Slot info ---> ", data);
      const slotInfo = data.data.slotInfo;
      this.setState({ slotInfo: slotInfo });
    } catch (error) {
      console.error(Error(`Error getting slotIds: ${error.message}`));
    }
  };

  render() {
    const { onSlotIdChange, slotId } = this.props;
    const { slotInfo } = this.state;
    return (
      <div>
        <Form.Field required>
          <Dropdown
            id="slotId"
            value={slotId}
            onChange={onSlotIdChange}
            selection
            fluid
            placeholder="Please select a slot id"
            clearable
            options={slotInfo.map(slotId => {
              return {
                text: slotId.slotId,
                value: slotId.slotId,
                key: slotId.slotId
              };
            })}
          />
        </Form.Field>
        <div style={{ marginTop: "2em" }}>
          <Table inverted celled>
            <Table.Header fullWidth>
              <Table.Row>
                <Table.HeaderCell>Slot Id</Table.HeaderCell>
                <Table.HeaderCell>Initialized</Table.HeaderCell>
                <Table.HeaderCell>Label</Table.HeaderCell>
              </Table.Row>
            </Table.Header>

            <Table.Body>
              {Object.values(slotInfo).map(({ slotId, initialized, label }) => {
                return (
                  <Table.Row>
                    <Table.Cell>{slotId}</Table.Cell>
                    <Table.Cell>{initialized}</Table.Cell>
                    <Table.Cell>{label}</Table.Cell>
                  </Table.Row>
                );
              })}
            </Table.Body>
          </Table>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);