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

I didn't test it but as i can see it should be something like this:

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

  {flag && (
    <div><Addroom index={i}/></div>
  )}
  {!flag && (
    <div><HomePage index={i}/></div>
  )}

You need to call setFlage function with argument of Boolean saying true or false and it changes the flag variable that you want to read.

Answer 2

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>
  );
}

Answer 3

You are missing render methods and also you should use setState for reactive rendering.( when you use state variables and once value changed render method will rebuild output so this will load your conditinal component.

https://jsfiddle.net/khajaamin/f8hL3ugx/21/

--- HTML

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div> In Home</div>;
  }
}

class Contact extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div> In Contact</div>;
  }
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
    };
  }

  handleClick() {
    this.setState((state) => ({
      flag: !state.flag,
    }));
    console.log("hi", this.state.flag);
  }

  getSelectedComp() {
    if (this.state.flag) {
      return <Home></Home>;
    }
    return <Contact></Contact>;
  }
  render() {
    console.log("refreshed");
    return (
      <div>
        <h1>
          Click On button to see Home component loading and reclick to load back
          Contact component
        </h1
        <button onClick={() => this.handleClick()}>Switch Component</button>
        {this.getSelectedComp()}
      </div>
    );
  }
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"));