title: to display a different component with each click (using hooks)
body: <p>I want to display a different <code>component</code> with each  <code>button</code> click.
  I'm sure the <code>syntax</code> is wrong, can anyone help me? The browser doesn't load
  I would love an explanation of where I went wrong</p>
  <p>One component (instead of <code>HomePage</code>) should display on the <code>App component</code> after clicking the button. Help me to understand the right method.</p>
  <p>Thanks!</p>
  <p><strong>App.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, {useState} from 'react';
  import './App.css';
  import Addroom from './components/Addroom.js'
  import HomePage from './components/HomePage.js'
  
  function App() {
  
    const [flag, setFlage] = useState(false);
  
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
       
        &lt;h1&gt;My Smart House&lt;/h1&gt;
  
        &lt;button onClick={()=&gt;{setFlage({flag:true})}}&gt;Addroom&lt;/button&gt;
        &lt;button onClick={()=&gt;{setFlage({flag:false})}}&gt;HomePage&lt;/button&gt;
  
  
        {setState({flag}) &amp;&amp; (
          &lt;div&gt;&lt;Addroom  index={i}/&gt;&lt;/div&gt;
        )}
        {!setState({flag}) &amp;&amp; (
          &lt;div&gt;&lt;HomePage index={i}/&gt;&lt;/div&gt;
        )}
      &lt;/div&gt;
    )
  }
  export default App;
  </code></pre>
  <p>HomePage</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  
  export default function HomePage() {
      return (
          &lt;div&gt;
              HomePage
          &lt;/div&gt;
      )
  }
  
  </code></pre>
  <p>Addroom</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  
  export default function Addroom() {
      return (
          &lt;div&gt;
              Addroom
          &lt;/div&gt;
      )
  }
  
  </code></pre>