React Bootstrap typeahead doesn't display options correctly

Question

I'm trying to use React Bootstrap Typeahead, however the options aren't displaying in the Typeahead component when I load the page.

My page code looks like this:

const React = require('react');
const Jumbotron = require('react-bootstrap').Jumbotron;
const Container = require('react-bootstrap').Container;
const Form = require('react-bootstrap').Form;
const FormGroup = require('react-bootstrap').FormGroup;
const Button = require('react-bootstrap').Button;
const Typeahead = require('react-bootstrap-typeahead').TypeaheadInputSingle
const AuthorisedLayout = require('./Layouts/authorised');

class Generate extends React.Component {
  render() {
    const options = Object.keys(this.props.musicServices).map((id) => {
      return {id: id, label: this.props.musicServices[id].name }
    });
    console.log(options);
    return (
      <AuthorisedLayout title={this.props.title}>
        <Jumbotron>
          <Container>
            <h1 className="display-3">{this.props.title}</h1>
            <p>HI, this will generate a new key pair to be stored on the server.</p>
            <p>When the generation is complete, a zip file containing the key pair will download to your machine.</p>
          </Container>
        </Jumbotron>
        <Container>
          <Form method='POST'>
            <FormGroup controlId="service">
              <Form.Label>Music Service</Form.Label>
              <Typeahead
                id="service"
                options={options}
                placeholder="Choose a Music Service..."
              />
            </FormGroup>
            <Button variant="primary" type="submit">
              Generate key pair
            </Button>
          </Form>
        </Container>
      </AuthorisedLayout>
    );
  }
}

module.exports = Generate;

with the options coming out as:

[
  { id: '12314645', label: 'amazon' },
  { id: '12354635', label: 'itunes' },
  { id: '12354645', label: 'bleep' }
]

My header contains: https://unpkg.com/[email protected]/css/Typeahead.css and seems to be loading correctly. When I use: const Typeahead = require('react-bootstrap-typeahead').TypeaheadInputSingle rather than const Typeahead = require('react-bootstrap-typeahead') or const Typeahead = require('react-bootstrap-typeahead').Typeahead, the dropdown box and background appear, but doesn't contain any data... when inspecting the element, it shows as:

<input id="service" options="[object Object],[object Object],[object Object]" placeholder="Choose a Music Service..." class="rbt-input-main form-control rbt-input"> suggesting that it's kind of reading the options but not interpreting them correctly.

Answer 1

You need to require the Typeahead component, not TypeaheadInputSingle:

const Typeahead = require('react-bootstrap-typeahead').Typeahead;

TypeaheadInputSingle is a subcomponent and can't be used on its own.