title: React append component programmatically
body: <p>I want to create a react component instance and render it in a static place programmatically.
  My use-case is that I open a sequence of dialogs in an unknown length and when I get a response from a dialog I open the next.</p>
  
  <p>I want to do something like:</p>
  
  <pre><code>const DialogExample = () =&gt; ({ question, onAnswer }) =&gt;
    (&lt;div&gt;
      {question}
      &lt;button onClick={onAnswer}&gt;answer&lt;/button&gt;
    &lt;/div&gt;);
  
  class SomeComponent extends React.Component {
    async start() {
      const questions = await getSomeDynamicQuestions();
      this.ask(questions);
    }
  
    ask(questions) {
      if (questions.length === 0) {
        // DONE.. (do something here)
        return;
      }
  
      const current = questions.pop();
  
      React.magicMethod(
          // The component I want to append:
          &lt;DialogExample 
              question={current} 
              onAnswer={() =&gt; this.ask(questions)}
          /&gt;,
          // Where I want to append it:
          document.getElementsByTagName('body')[0]);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.start}&gt;start&lt;/button&gt;
        &lt;/div&gt;);
    }
  }
  </code></pre>
  
  <p>I know that's not very "react-like", and I guess the "right" way of doing it will be storing those questions in state and iterate over them in "someComponent" (or other) render function, but still, I think that this pattern can make sense in my specific need.</p>