React Syncing element from Virtual DOM with element from HTML DOM

Question

I have a react component which contains a 3D animation with playback controls (pause/play) inside a HTML page and I need the controls to be synced with some buttons outside the react component.
The controls in react are implemented like this

<Button  color='red' onClick={() => { setDataPlayback(false); }} >  <Icon name='pause' /></Button>
<Button color='red' onClick={() => { setDataPlayback(true); }} >  <Icon name='play' /> </Button>

and the buttons in the html page are

<div id="btns">
    <button id="html-button-pause" onclick="python_function_pause()"></button>
    <button id="html-button-play" onclick="python_function_play()"></button>
</div>

So whenever I press a button in react, I want it to trigger a click on the html button.

Answer 1

I think this should work:

<Button  color='red' onClick={() => { setDataPlayback(false); python_function_pause(); }} >  <Icon name='pause' />

And the same for the other button. You can invoke click of an HTML element programmatically using .click() function. You can read more about it here .