How to create a dialog box in React js?

Question

React

I started learning React js and decided to create a simple modular dialog based on the JS code from this example: plnkr.co/edit/gIVdgTQ5MXKy8a19XKvz?p=preview but I don't know where to start from. Can't figure out how to convert normal JS expressions to React.
I have a component from which I want to call a dialog box, by clicking on a button in it, i.e. launch the dialog box from the click handling function. Looks like this:

// Тут прочий код
.....

// Обработать нажатие на кнопку "Добавить"
  handlerAdd: function(event) {
    event.preventDefault();

                // Когда тупо копирую код из примера, то всё работает.
    var coverDiv = document.createElement('div');
      	        coverDiv.id = 'cover-div';
      	        document.body.appendChild(coverDiv);

                // А вот как это сделать на React не знаю, вставка тэга приводит к ошибке, т.к. я думаю это должно быть 
                // в функции ниже.
               
    var coverDiv= <div className = "cover-div">
    </div>
    document.body.appendChild(coverDiv);
  },

  render : function() {
    return (
      <div className="grid-box">
        <p>{this.state.error}</p>
        <NavPanel onClickAdd = {this.handlerAdd} />
        <Grid />				
      </div>
    );
  }

Answer 1

When handling an event in handlerAdd, you do not need to create a div element, insert a react component and update it.
Those. the code should look like this:

getInitialState: function(){
    return{
        block: null
    }
},

handlerAdd: funcion(){
    this.setState({
        block: <PopUp/>
    });
} 

render : function() {
    return (
        <div className="grid-box">
            <p>{this.state.error}</p>
            <NavPanel onClickAdd = {this.handlerAdd} />
            <Grid />				
            {this.state.block}
        </div>
    );
 }

Where will your cover-div block be in PopUp.