Blueprint Select value field

Question

I am working with BlueprintJs Select component and it is able to render. However it does not display any value text as it should display. I am not sure why it is not being displayed. Because Select is using InputGroup, the doc says to use inputProps to set value and onchange function but this does not seem to work. My code is the following

import React from 'react';
import { Select } from '@blueprintjs/labs';
import { MenuItem, Button } from '@blueprintjs/core';
import PropTypes from 'prop-types';

class BlueprintSelect extends React.Component {
  constructor(props) {
    super(props);
    const elementSelectItems = [
      { id: 1, query: 'term(s)' },
      { id: 2, query: 'range' },
    ];
    this.state = {
      elementSelectItems,
      selectedValue: elementSelectItems[0].query,
    };
  }

  handleElementSelect = ({ query }) => {
    console.log('printint our', query);
  }

  renderSelect = ({ handleElementSelect, item }) => (
    <MenuItem
      key={item.id}
      label={item.query}
      onClick={handleElementSelect}
      text={item.query}
      shouldDismissPopover
    />
  )

  render() {
    const elementSelectItems = [
      { id: 1, query: 'term(s)' },
      { id: 2, query: 'range' },
    ];
    return (
      <div className="elementSelector">
        <Select
          inputProps={{ value: this.state.selectedValue, onChange: this.handleElementSelect }}
          items={elementSelectItems}
          filterable={false}
          itemRenderer={this.renderSelect}
          onItemSelect={this.handleElementSelect}
          noResults={<MenuItem disabled text="No results." />}
        >
          <Button className="querySelectButton" text="query Type" rightIconName="caret-down" />
        </Select>
      </div>
    );
  }
}

why is the value not able to show when I selected one of the two menu items especially when the controlled state is being implemented with the inputProps property for the Select component?

Answer 1

In the example they set the value in text attribute of the nested child Button of Section Component. There is an example https://blueprintjs.com/docs/#select/select-component. I would do something like:

<Section> ... <Button text={this.state.selectedValue || elementSelectItems[0].value} /></Section>