How to hide input textfield for login after user logged in?-CodePudding

What I want to know is, how can I hide the input textfields of the login, after the user logged in. It is a singlewebapp, so I don't have any routes or something like that.

My Login:

const login = () => {
        Axios.post("http://localhost:3001/login", {
            username: username,
            password: password,
        }).then((response) => {
            if (response.data.message) {
                setLoginStatus(response.data.message);
            } else {
                setLoginStatus(response.data[0].username);
            }
        });
    };

<div className="gpt3__navbar-sign">
                <p>
                    <div className="formField">
                        <input
                            type="text"
                            className="loginInputField"
                            placeholder="E-Mail"
                            onChange={(e) => {
                                setUsername(e.target.value);
                            }}
                        />
                        <input
                            type={passwordShown ? "text" : "password"}
                            className="loginInputField"
                            placeholder="Password"
                            onChange={(e) => {
                                setPassword(e.target.value);
                            }}
                        />
                    </div>
                </p>
                <div className="gpt3__navbar-sign">
                    {!loginStatus ? (
                        <button onClick={login} className="formFieldButton">Einloggen</button>
                    ) : (
                        <button onClick={logoutUser} color="inherit">
                            Logout
                        </button>
                    )}
                </div>
            </div>

Thanks in advance

CodePudding user response：

You can do the same thing as you did for button:

<div className="gpt3__navbar-sign">
                <p>
                    <div className="formField">
                       {!loginStatus && 
                          <>
                            <input
                            type="text"
                            className="loginInputField"
                            placeholder="E-Mail"
                            onChange={(e) => {
                                setUsername(e.target.value);
                            }}
                          /> 
                          <input
                            type={passwordShown ? "text" : "password"}
                            className="loginInputField"
                            placeholder="Password"
                            onChange={(e) => {
                                setPassword(e.target.value);
                            }}
                          />
                       </>}
                    </div>
                </p>
                <div className="gpt3__navbar-sign">
                    {!loginStatus ? (
                        <button onClick={login} className="formFieldButton">Einloggen</button>
                    ) : (
                        <button onClick={logoutUser} color="inherit">
                            Logout
                        </button>
                    )}
                </div>
            </div>