title: Xterm.js: How to hide xterm-helper-textarea?
body: <p>I try to use Xtermjs in Reactjs. but when I follow the guide. the result shows as following:</p>
  
  <p><a href="https://i.stack.imgur.com/ShswF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ShswF.png" alt="enter image description here"></a></p>
  
  <p><strong>It should show without top textarea and text 'W'.</strong></p>
  
  <p>My codes is as following:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { Terminal } from 'xterm';
  import { FitAddon } from 'xterm-addon-fit'; 
  
  class XTerminal extends React.Component {
      componentDidMount() {
          const {id} = this.props;
          const terminalContainer = document.getElementById(id);
          const terminal = new Terminal({cursorBlink: true});
          const fitAddon = new FitAddon();
          terminal.loadAddon(fitAddon);
          terminal.open(terminalContainer);
          terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
          fitAddon.fit();
      }
  
      render() {
          return(
              &lt;div id={this.props.id}&gt;&lt;/div&gt;
          )
      }
  }
  
  export default XTerminal;
  </code></pre>
  
  <p>I seach a similar question in <a href="https://stackoverflow.com/questions/58886813/hide-helper-text-box-from-xterm-js">stackoverflow</a> without no answer. and I cannot comment in that question. So I write this question. Could anyone help? thanks :)</p>