(10) Github-style user suggestions using react-input-trigger

index.jsx

...

class App extends Component {
  constructor() {
    this.state = {
      ...
      currentSelection: 0,
    }
      
    ...
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }
  
  ...
  
  handleKeyDown(event) {
    const { which } = event;
    const { currentSelection, users } = this.state;
    
    if (which === 40 ) { // 40 is the character code of the down arrow
      event.preventDefault();
      
      this.setState({
        currentSelection: (currentSelection + 1) % users.length,
      });
    }  
  }
  
  render() {
    return (
      <div
        style={{
          position: 'relative'        
        }}
        
        onKeyDown={this.handleKeyDown}
      >
        ...

        <div
          id="dropdown"
          style={{
            ...
          }}
        >
          {
            this.state.users
              .filter(user => user.indexOf(this.state.text) !== -1)
              .map((user, index) => (
                <div
                  style={{
                    padding: '10px 20px',
                    background: index === this.state.currentSelection ? '#eee' : ''
                  }}
                >
                  { user }
                </div>
              ))  
          }
        </div>
      </div>
    );
  }  
}

...