Как такое можно реализовать на react.js?

Question

[georgedubinsky8888]

Здравствуйте.
Хотел бы спроcить в более опытных програмистов, как реализовать приведенный ниже код в React? Проблема заключается в том, что я пока что достаточно поверхностно разбираюсь в React. А код мне очень нужен в одном моем проекте.
Задача такая:
Есть страница, через несколько секунд после ее загрузки появляется кнопка "свяжитесь с нами", а еще через несколько секунд появляется рядом с ней маленькое окно с текстом от консультатанта и его именем.
Вот так:

cначала:


а потом:

<!--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

[0xD34F]

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/

Comments

[georgedubinsky8888]

спасибо!

Answer 2

[Роман Александрович]

https://jsfiddle.net/5bxwgs7r/1/

Comments

[georgedubinsky8888]

спасибо!