How to change state of react js component from outside?

Question

JavaScript

The project needed to dynamically create and show a simple modal window on a button click.
The idea is this: when clicked, an event is generated, all listeners somehow react to it. Among them is a modal window component, which, based on the received data, renders the corresponding block or, if necessary, updates the data in it.
It would be possible to take any template engine, the same nunjucks, which is like my own, and create this same window.
But since in the future there will most likely be more complex elements in the project, I decided to take React js as a View, with which, however, I never worked at all.
It turned out something like this:

....
        this.on('showModal', function (data) {
            ReactDOM.render(
                <this.renderWindow data={data} />,
                this.el
            );
        });
....

The modal window is created, everything is ok. Now we need to hide it somehow. I add the state this.state.show.
Now, on click, it even hides.
But on the 'showModal' event, it is not shown again. I understand that ReactDOM.render(...); React checks the state - it hasn't changed, this.state.show is still false and it just doesn't do anything.
I looked at examples of the implementation of a modal window in React. In them, the "Show window" button is always part of the component and simply changes the state.
I have this button in a completely different place, it is rendered on the server, and I don’t want to associate it with a window or make it a react component. I would like to simply change the state of the component on an event.
But how to do it - I do not understand.
Or is it better in this case not to drag React into the project at all and make a view on something else?

Answer 1

Just subscribe to this event in the method componentDidMountand change the state as you like.

Answer 2

Strange problem. React is a view, and we store all the state using the Flux architecture (redux, in this case). At the app level, we write a reducer that is responsible for the activity of the modal window. If the window is active - render it. I repeat, in react at the level of the entire application, we never do such hacks that are written above, but instead we store the entire state in the redux store. This is really handy for independent operations. And if you try to create this at the component level, then it's easier not to use react.

Answer 3

At first it seemed to me that this is a perversion - to use React, instead of a template engine, like from a cannon to sparrows.
But, in the use itself, in my opinion, there is nothing special - here I have collected a demo
for you . In short:
If you use my component, then you need to change your code a little:

...
  this.on('showModal', function (data) {
    if (!window.modalAttached) {
      ReactDOM.render(
        <ModalWindow data={data} />,
        this.el
      )
    }      
    window.toggleModal();
  }
...