title: How to take a key up/down in web chat using react
body: <p>I am currently doing bot-framework web chat application using react js.I want to know how can i take a key up/down. As i want to  select or highlight through suggestion list using arrow keys. My code which i used for the react component is attached below, PFA,</p>
  
  <pre><code>async handleSuggestionClick(val) {
    const newValue = val.currentTarget.textContent;
  
    await this.setState({ typingChecking: "false" },
      () =&gt; { console.log(this.state.typingChecking) });
  
    await this.setState({ suggestions: [] },
      () =&gt; { console.log(this.state.suggestions) });
  
  
    this.state.suggestionCallback.dispatch({
      type: 'WEB_CHAT/SET_SEND_BOX',
      payload: {
          text: newValue,
      }
    });
    await this.setState({ typingChecking: "true" },
      () =&gt; { console.log(this.state.typingChecking) });
  }
  
  &lt;div className="react-container webchat" &gt;
      &lt;ReactWebChat directLine={this.state.directLine} 
        webSocket={true}  
        store={this.state.storeValue} 
        sendTypingIndicator={true} /&gt;
      &lt;div className="SuggestionParent" id="Suggestion1"&gt;
        {this.state.suggestions.map(suggestion =&gt; (
          &lt;div className="Suggestion" 
            onClick={this.handleSuggestionClick} 
            onKeyDown={this.handleKeyDown}&gt;
            {suggestion
              .toLowerCase()        
              .startsWith(this.state.suggestionTypedText) ? 
                 (&lt;div&gt;
                    &lt;b&gt; 
                      {this.state.suggestionTypedText}
                    &lt;/b&gt;
                    {suggestion
                      .toLowerCase()
                      .replace(this.state.suggestionTypedText, "")}
                  &lt;/div&gt;) : 
                  (&lt;div&gt;{suggestion}&lt;/div&gt;
                )
             }
          &lt;/div&gt;
        ))
       }
  &lt;/div&gt;
  </code></pre>