How do I replace the current component content with other component content in React

Question

Hey guys I know the title is a bit confusing , but im sure here you will understand better what i need. So im trying to build a social media app like instagram and at the moment im building the login component but im stuck since im still learning how to use react.So here I have my login component:

 function LoginMenu (){ 
 const [email, setEmail] = useState(null);
 const [password, setPassword] = useState(null);
 return (
  <div style = {styles2}>
  <form className="form-signin" style = {styles}>
      <div className="form-label-group" >
        <label htmlFor="inputEmail">
          Email address
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
            autoFocus
            onChange = {event => setEmail(event.target.value)}
          ></input>
        </label>
      </div>

      <div className="form-label-group" >
        <label htmlFor="inputPassword">
          Password
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
            onChange = {event => setPassword(event.target.value)}
          ></input>
        </label>
      </div>
      <button
        className="btn btn-lg btn-primary btn-block"
        onClick = {() => <MainApp/>}
        type="submit"
      >
        Sign in
      </button>
    </form>
  </div>
);

} all I want to do is , when i click the button , the MainApp components content to take over the page and the login menu to be gone, just like it happens in every site with login screen

score 1 · Accepted Answer · answered Nov 17 '19 at 20:21

I advise you to learn about Router in ReactJs which enable the navigation between multiple pages.

Else you can define a state property displayMain to update your render.

For example :

let [displayMain, setDisplayMain] = useState(false); // initial value is false
if(displayMain){
   return <MainComponent/>; // Your main component to render
}
else{
   // your Login Component to render
   return <button onClick=>{()=>setDisplayMain(true)}/>; // update displayMain
}

But I insist that you should use Router to implement an efficient solution.

Your example fixed the problem , Ill try to learn how to do it with the efficent way you mentioned , but im still a beginner so ill leave that for late :D , thanks for the help. — Chrissisbeast, Nov 17 '19 at 20:49

How do I replace the current component content with other component content in React

1 Answers1