How to call components one by one?

Question

JavaScript

Hello. The question is more for people familiar with React / react native, perhaps this is a more global topic and knowledge of only JS will do.

In general, there are 2 components (classes). When you click on the button, you need to launch the first component first (a modal window asking you to fill in the data) and after closing it, launch the second component (also a modal window with a time count). I roughly understand that it is possible to somehow implement this through async or then , but I don’t understand exactly how. Since in fact these components return just a data display. How to understand that the first component has completed its work and you need to start the second one?
I also want to clarify that the second component cannot be called from the first

Answer 1

components are only triggered based on data, you can't trigger them manually. You can make a state property in the main component

const App = () => {
  const [showComponent, changeShowComponent] = useState(0)
  return <div>
    <button onClick={() => changeShowComponent(1)}>Начинаем</button>
    {showComponent === 1 && <FirstModalComponent changeShowComponent />}
    {showComponent === 2 && <SecondModalComponent changeShowComponent />}
  </div>
}

Accordingly, inside the first modal component, at the right time, call the function passed to it and everything will be redrawn, the first component will disappear, the second will appear changeShowComponent(2)