title: set innerText on React
body: <p>I have a little app that takes user input, and I want to show them a little preview as they type (exactly as Stackoverflow does it).</p>
  
  <p>I try something like this:</p>
  
  <pre><code>ReactDOM.render(
    &lt;div&gt;{user_input}&lt;/div&gt;,
    document.getElementById('preview')
  );
  </code></pre>
  
  <p>It works great until I try to add a new line, react it ignores and just renders a white space. But if I do it on vanilla javascript:</p>
  
  <pre><code>var content = document.createElement('div');
  content.innerText = user_input;
  document.getElementById('preview').appendChild(content);
  </code></pre>
  
  <p>Doing it like this does the trick and every line break gets automatically turned into a <code>&lt;br&gt;</code> tag.</p>
  
  <p>Is there a way to set innerText on react or should I just go with the vanilla solution?</p>
  
  <p>Is there a setback in using innerText?</p>