CSS Modules for Reactors

[ynunokawa]

Geocoder.js

import style from './Geocoder.css'

...

render () {
    let suggestions = null;

    if (this.state.suggestions.length > 0) {
      const suggestionItems = this.state.suggestions.map(function (s, i) {
        return (
          <MenuItem onClick={this._onClickSuggestion} id={s.magicKey} key={s.magicKey}>{s.text}</MenuItem>
        );
      }.bind(this));
      suggestions = (
        <Dropdown.Menu className="style.DropdownMenu">
          {suggestionItems}
        </Dropdown.Menu>
      );
    } else {
      suggestions = (
        <span></span>
      );
    }

    return (
      <FormGroup>
        <InputGroup onChange={this._onChangeText}>
          <FormControl type="text" placeholder={this.props.placeholder} onKeyPress={this._onKeyPress} />
          <InputGroup.Button>
            <Button onClick={this._onSearch}><Glyphicon glyph="search" /></Button>
          </InputGroup.Button>
        </InputGroup>
        {suggestions}
      </FormGroup>
    );
  }

Geocoder.css

.DropdownMenu {
  display: block;
  top: 85%;
  left: 15px;
}