How can this be implemented in react.js?

Question

React

Hello.
I would like to ask more experienced programmers how to implement the below code in React? The problem is that I still have a fairly superficial understanding of React. And I really need the code in one of my projects.
The task is as follows:
There is a page, a few seconds after it is loaded, the "contact us" button appears, and after a few seconds a small window appears next to it with text from the consultant and his name.
Like this:
first:

and then:

<!--html-->
<div class="block-1">Блок 1</div>
<div class="block-2">Блок 2</div>

<!--js-->
const block1 = document.querySelector('.block-1');
const block2 = document.querySelector('.block-2');

setTimeout(function(){
    block1.style.display = 'block';
    setTimeout(function(){
    block2.style.display = 'block';
  },3000);
},3000);

<!--css-->
.block-1,.block-2 {
  display: none;
}

Answer 1

state = {
  block1: false,
  block2: false,
}

componentDidMount() {
  setTimeout(() => this.setState({ block1: true }), 3000);
  setTimeout(() => this.setState({ block2: true }), 6000);
}

render() {
  const { block1, block2 } = this.state;
  return (
    ...
      {block1 && <div class="block-1">Блок 1</div>}
      {block2 && <div class="block-2">Блок 2</div>}
    ...
  );
}

UPD. https://jsfiddle.net/jaLgf9w7/

Answer 2

Add INTERNET_FLAG_RELOAD to dwFlags HttpOpenRequest?