title: how can i retrive data from database and display it in a Select dropdown
body: <p>I need to display into the Select the response of the query mostraReferti, so I can display the list of items from the dropdown menu.</p>
  
  <p>This is the response I get from the query:</p>
  
  <p>response:</p>
  
  <pre><code>[
    {
      hash_referto: "e9cceea77b26d2090649a923116a35882088d23378b0ad10ff48d139ae3db1da",
      proprietario: "050708",
      public_key: "0x7343197ba6ee64b5f07322ce1acb0f8f29897689",
      data_esame: "2019-08-23T00:00:00.000Z",
      tipo_esame: "urologia",
      uri: null
    },
    {
      hash_referto: "5bad691600ade15abc5949ba8b089e0699071b72e503364fd0e05438a4b4581d",
      proprietario: "230888",
      public_key: "0x9628ade5057141a66018b63b78cbdc4a44f055b2",
      data_esame: "2019-09-01T00:00:00.000Z",
      tipo_esame: "pediatra",
      uri: null
    },
    {
      hash_referto: "codiceReferto",
      proprietario: "230888",
      public_key: "0x9628ade5057141a66018b63b78cbdc4a44f055b2",
      data_esame: "2019-10-02T00:00:00.000Z",
      tipo_esame: "dentista",
      uri: null
    }
  ];
  </code></pre>
  
  <p>it would be nice to display only "data esame" and "tipo esame"</p>
  
  <p>Here's the code:</p>
  
  <pre><code>class CredentialsPanel extends Component {
    constructor(props) {
      super(props);
      this.state = {
        allowToProceed: false,
        email: "",
        receiverCode: "",
        initialDate: "",
        expireDate: "",
        rights: "",
        codiceReferto: null,
        nextBtnDisabled: true,
        careGiver: "",
        value: "",
        id: "",
        referti: {}
      };
      this.handleInputChange = this.handleInputChange.bind(this);
    }
  
    handleInputChange(event) {
      const target = event.target;
      const value = target.type === "checkbox" ? target.checked : target.value;
      const name = target.name;
      this.setState({
        [name]: value
      });
    }
  
    componentDidMount() {
      const { actions } = this.props;
  
      requestAccountAccess(defaultAccount =&gt; {
        actions.account.setDefaultAccount(defaultAccount);
        actions.contract.setContract(defaultAccount);
      });
  
      mostraReferti(this.state.id);
    }
  
    static getDerivedStateFromProps(nextProps) {
      const { account } = nextProps;
      return { id: account.id };
    }
  
    onEnter = evt =&gt; {
      if (evt.key === "Enter") {
        const { allowToProceed } = this.state;
        if (allowToProceed) {
          this.proceed();
        }
      }
    };
  
    proceed = () =&gt; {
      const { actions, history } = this.props;
      const { codiceReferto, id } = this.state;
  
      actions.account.setCodiceReferto(codiceReferto);
      history.push("/consenso?panel=2");
    };
  
    enableNext = input =&gt; {
      const {} = this.props;
      if (input.valid) {
        this.setState({
          allowToProceed: true,
          email: input.value,
          nextBtnDisabled: false
        });
      }
    };
  
    render() {
      const { id, nextBtnDisabled } = this.state;
  
      return (
        &lt;div className={styles}&gt;
          &lt;h2&gt;Compila i campi per assegnare un consenso&lt;/h2&gt;
          &lt;Form onSubmit={this.handleSubmit}&gt;
            &lt;div className="form-section"&gt;
              &lt;div className="custom-select"&gt;
                &lt;Label for="type" text="Codice Referto" /&gt;
                &lt;select
                  name="codiceReferto"
                  placeholder="Selezionare Referto"
                  onKeyPress={this.onEnter}
                  value={this.codiceReferto}
                  onChange={this.handleInputChange}
                &gt;
                  &lt;option default value="vuoto"&gt;&lt;/option&gt;
                  &lt;option value="ciao"&gt;Display items&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
  
              &lt;br /&gt;
              &lt;br /&gt;
  
              &lt;br /&gt;
  
              &lt;Label text="Il tuo Account ID (da MetaMask)" /&gt;
              &lt;Input type="text" readOnly value={id} /&gt;
            &lt;/div&gt;
          &lt;/Form&gt;
  
          &lt;Controls
            prevDisabled
            nextDisabled={nextBtnDisabled}
            handleNext={this.proceed}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mostraReferti(id) {
    console.log("id", id);
    axios.get("http://localhost:8080/api/REFERTOs/" + id).then(response =&gt; {
      console.log("response " + JSON.stringify(response.data));
      return response.data;
    });
  }
  
  function mapStateToProps(state) {
    return {
      account: state.account,
      asset: state.asset
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      actions: {
        account: bindActionCreators(accountActionCreators, dispatch),
        contract: bindActionCreators(contractActionCreators, dispatch)
      }
    };
  }
  
  CredentialsPanel.propTypes = {
    account: PropTypes.shape({
      email: PropTypes.string,
      receiverCode: PropTypes.string,
      initialDate: PropTypes.date,
      expireDate: PropTypes.date,
      rights: PropTypes.string,
      codiceReferto: PropTypes.string,
      id: PropTypes.string
    }).isRequired,
    actions: PropTypes.shape({}).isRequired,
    asset: PropTypes.shape({}),
    history: PropTypes.shape({}).isRequired
  };
  
  CredentialsPanel.defaultProps = {
    asset: null
  };
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CredentialsPanel))
  </code></pre>