to display a different component with each click (using hooks)

Question

I want to display a different component with each button click. I'm sure the syntax is wrong, can anyone help me? The browser doesn't load I would love an explanation of where I went wrong

One component (instead of HomePage) should display on the App component after clicking the button. Help me to understand the right method.

Thanks!

App.js

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 (
    <div className="App">
     
      <h1>My Smart House</h1>

      <button onClick={()=>{setFlage({flag:true})}}>Addroom</button>
      <button onClick={()=>{setFlage({flag:false})}}>HomePage</button>


      {setState({flag}) && (
        <div><Addroom  index={i}/></div>
      )}
      {!setState({flag}) && (
        <div><HomePage index={i}/></div>
      )}
    </div>
  )
}
export default App;

HomePage

import React from 'react'

export default function HomePage() {
    return (
        <div>
            HomePage
        </div>
    )
}

Addroom

import React from 'react'

export default function Addroom() {
    return (
        <div>
            Addroom
        </div>
    )
}

Answer 1

Try the following.

function App() {
  const [flag, setFlage] = useState(false);

  return (
    <div className="App">
      <h1>My Smart House</h1>

      <button
        onClick={() => {
          setFlage(true);
        }}
      >
        Addroom
      </button>
      <button
        onClick={() => {
          setFlage(false );
        }}
      >
        HomePage
      </button>
      {flag ? <Addroom /> : <HomePage /> }
      
    </div>
  );
}