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

index.jsx

...

class App extends Component {
  constructor() {
    this.state = {
      ...
      text: null,
    }
    
    ...
    this.handleInput = this.handleInput.bind(this);
  }
  
  ...
  
  handleInput(metaInformation) {
    this.setState({
      text: metaInformation.text,
    });
  } 
  
  render() {
    return (
      <div
        style={{
          position: 'relative'        
        }}  
      >
        <InputTrigger
          trigger={{
            keyCode: 50,
            shiftKey: true,
          }}
          onStart={(metaData) => { this.toggleSuggestor(metaData); }}
          onCancel={(metaData) => { this.toggleSuggestor(metaData); }}
          onType={(metaData) => { this.handleInput(metaData); }}
        >
          ...
        </InputTrigger>

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

...