title: React for displaying the log file in real-time (Flask backend)
body: <p>I have a working code (Flask + plain JS) which shows the growing log file in real time.
  I have a problem converting it to ReactJS.</p>
  
  <p>app.py (Flask, working code, no problems)</p>
  
  <pre><code>@app.route('/stream')
  def stream():
      def generate():
          fname="/Users/xxx/tmp/log.txt"
          with open(fname) as f:
              while True:
                  yield f.read()
                  sleep(1)
      return 
      app.response_class(generate(), mimetype='text/plain')
  
  app.run()
  </code></pre>
  
  <p>index.html (plain JS, no problems)</p>
  
  <pre><code>&lt;pre id="output"&gt;&lt;/pre&gt;
  &lt;script&gt;
      var output = document.getElementById('output');
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '');
      xhr.send();
  
      setInterval(function() {
          output.textContent = xhr.responseText;
      }, 1000);
  &lt;/script&gt;
  </code></pre>
  
  <p>Below is my attempt to convert it to React.</p>
  
  <p>On MyPage.jsx I put the button "Show Real Time Log". 
  When user clicks this button the Modal Dialog should pop-up and display the log.</p>
  
  <p>File: MyPage.jsx</p>
  
  <pre><code>import Modal from 'react-bootstrap/Modal'
  import { Button } from 'react-bootstrap'
  
  const showLog = (e) =&gt; {
      render(&lt;ModalLog /&gt;,  document.getElementById('output'));
  }
  
  const MyPage = () =&gt; {
    return (
      &lt;div&gt;
            &lt;div id="output"&gt;&lt;/div&gt;
            &lt;button type="button" onClick={showLog}&gt;Show Real Time Log&lt;/button&gt;
  &lt;/div
  }
  
  function ModalLog() {
    const [show, setShow] = useState(true);
  
    const handleClose = () =&gt; setShow(false);
    const handleShow = () =&gt; setShow(true);
  
    return (
      &lt;&gt;
        &lt;Modal show={show} onHide={handleClose}&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;Real Time Log&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt; Log file live update goes here &lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant="primary" onClick={handleClose}&gt;
              Close
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>Questions:</p>
  
  <ol>
  <li><p>Where to put into MyPage.jsx the JS code currently sitting in my index.html?</p></li>
  <li><p>When I press the button "Show Real Time Log" the Modal is displayed only 1st time, after I close it never displayed again. I understand what it is because handleClose() was called, but how to fix it?</p></li>
  </ol>