title: How do I change the innerHTML of an element using React?
body: <p>I want to change <code>innerHTML</code> of a <code>div</code>, when I click on the button. I don't know why, but instead of getting an error, or getting the expected result it deletes to content and replacing it with <code>"[object Object]"</code>.</p>
  
  <p>How can I get it work?</p>
  
  <pre><code>import React from 'react';
  import Login from './components/login.js';
  import SignIn from './components/signin';
  
  import './App.css';
  
  function App() {
    function LoginOnClick(){
      document.getElementById("wrapper").innerHTML = &lt;SignIn /&gt;;
    }
    return (
      &lt;div className="container" id="wrapper"&gt;
        &lt;button onClick={LoginOnClick}&gt;Login&lt;/button&gt;
        &lt;Login /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>