title: Bot Framework Webchat links onclick in React
body: <p>Because of other services that are integrated to the bot, we have to use HTML anchors instead of the markdown. </p>
  
  <p>When there is a link, we dynamically switch it to the following code:</p>
  
  <p><code>var newStr = sub.replace('*|', '&lt;a class="chatbot-link" title="help" href="#" onClick={this.click}&gt;').replace('*', '&lt;/a&gt;');</code></p>
  
  <p>The goal is when the link is clicked, I sends the text content back to the bot as a response. The issue is that I cannot figure out how to catch the onclick event. Only thing it does when click is that it generates a seperate index.js in the page sources. </p>
  
  <p>The base of the code I am using is a github webchat sample: <a href="https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.recomposing-ui" rel="nofollow noreferrer">Link</a></p>
  
  <p>The code added that is important for the example (in MinimizableWebChat.js):</p>
  
  <pre><code>const MinimizableWebChat = (activityID, children) =&gt; {
    const store = useMemo(
      () =&gt;
        createStore({}, ({ dispatch }) =&gt; next =&gt; action =&gt; {
  
          console.log(action.type);
  
          if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
              type: 'WEB_CHAT/SEND_EVENT',
              payload: {
                name: 'initConversation',
                value: {
                  language: window.navigator.language
                }
              }
            });
          } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
            if (action.payload.activity.from.role === 'bot') {
              setNewMessage(true);
              // action.payload.activity.text = action.payload.activity.text;        
              // action.payload.activity.text = ();
  
               action.payload.activity.text = ParseLinks(action.payload.activity.text);
  
              var atts = action.payload.activity.attachments;
              if (atts){
                atts.forEach(att =&gt; {
                  att.content.body.forEach(obj =&gt; {
                    obj.text = EmphasizeContent(obj.text);
                  })
                });
              }
            }        
         }
  
          return next(action);
        }),
      []
    );
  
    const items = ["Hello World!", "My name is TJ.", "I am from Denver."];
  
        var text = "asd";
  
    // const click = () =&gt; {
    //   store.dispatch({
    //     type: 'WEB_CHAT/SET_SEND_BOX',
    //     payload: {
    //       text
    //     }
    //   });
    // }
  
    const ParseLinks = (text) =&gt; {
      if(!text) return text;
  
      text = String(text);
      var a=[], i=-1;
  
      // Search for *|, if found, find next * and substirng. Add html to each substring    
      while((i=text.indexOf("*|",i+1)) &gt;= 0) {
        var iA = text.indexOf("*", i+2);
        var sub = text.substring(i,iA+1);
        // var newStr = sub.replace('*|', '&lt;a class="chatbot-link" title="help" href="#" onClick={this.click}&gt;').replace('*', '&lt;/a&gt;');
        var newStr = sub.replace('*|', '&lt;a class="chatbot-link" title="help" href="#" onClick={this.click}&gt;').replace('*', '&lt;/a&gt;');
  
        text = text.replace(sub, newStr);
      } 
      return text;
    }
  </code></pre>
  
  <p>I tried catching it in the middleware store and directly in bot MinimizableWebChat.js and WebChat.js. I need somekind of hook to get the event from ReactWebChat in some way to interact with it in the middleware.</p>
  
  <p>Fyi, pretty new to React, thanks for the help.</p>