React App calling JavaScript function from embedded webpage

I am working on a React App based on this example: https://github.com/facebook/create-react-app#creating-an-app

I embedded an HTML viewer on the bases of webkit, as far as I understand the code. This is something I inherited, and trying to expand on. The viewer displays a HTML5 page that embeds some JavaScript functions. Now I am trying to call one of the JavaScript function when clicking on a button defined in TypeScript.

Function declaration in HTML page:

function sendMessage(str) { theRenderArea.sendMessage(str); } Here, "theRenderArea" is defined in a javascript, and this HTML function is just sending the message on to the javascript. Thinking about it, I just need to access teh HTML sendMessage from my React UI. 

Function definition in JavaScript embedded in the HTML page

this.sendMessage = function(b) { if (this.isConnected()) { b = { type: "command", message: b.toString() }; var a = new h; this.websocket.send(a.encode(b)) } }; 

TypeScript viewer object opening HTML page:

function Viewer() { return ( <> <div id="loaderGroup" style={{"display": "none"}}><div id="loader"></div><div id="loaderText">Network calibration</div></div> <div id="TheDiv"></div> </> ) } export default Viewer 

Button definition in React app:

<Button style={{color: selected ? "#6A89FF": "#5B5C5D"}} onClick={sendMessage("some string")}> Interact </Button> 

I tried this suggestion: Call external Javascript function from react typescript components

But couldn't get it to work.