I got a Navbar which has a button do change the display value of a login form. The Login form and the Login form is a diffrent file, the navbar is a diffrent file and the homepage where it should be display is a diffrent file. Those are the minimal variants of each so that you got some got to understand my problem in detail:

Homepage:

const HomePage = () => {
    return (
        <div>
            <Navbar />
            <Login />
            <div id="content">
            </div>
        </div>
    );
}

Navbar:

const Navbar= () => {

    const showLogin = () => {
        document.getElementById('Login').style.display='block';
    }

  return (
    <div id="Navbar">
        <NavLink activeClassName="active" to='/'><img src={logo}/></NavLink>
        <ul>
            ...
        </ul>
        <ul>
            <button onClick={showLogin}>Anmelden</button>
        </ul>
    </div>
  );
}

Login-Form:

const Login = () => {
    return (

            <div id="Login">
                <form>
                    <label>Anmelden</label>
                    <label for="username">Nutzername</label>
                    <input name="username" type="text"></input>
                    <label for="pw">Passwort</label>
                    <input name="pw" type="password"></input>
                    <button type="submit">Login</button>
                </form>
            </div>
    );
}

Is there a way to achieve this, or would my easiest option be to include the Login source code into the Navbar source code?

CodePudding user response：

You do not need to move your Login component inside Navbar. Keep it as it is. You can use useState and Props to switch css classes to show/hide your Login component. I have created very simple solution for you in this CodeSandbox.

Steps:

1. Create two CSS classes hidden and block
2. In your Login component add a boolean prop which switches class hidden to block if true.
3. Create a prop for onClick in the Login component.
4. Create a useState inside your Homepage which holds a boolean value. That boolean value pass it to the Login page prop and then use onClick prop from Navbar to switch that boolean state

CodePudding user response：

Yes, depending on your CSS system this is easily achievable just by using that.

The React solution is using refs. The easy way is to create a ref in the parent component and then pass it down as a prop to both components:

• In Homepage (i.e. parent), create a ref like so loginRef = useRef(); then pass it down as a prop to the 2 children.

• In Login-Form.js you assign that prop on the div with id Login like so <div id='Login' ref={props.loginRef}>

• Then in Navbar.js you can use that prop to change its display value like so const showLogin = () => {props.loginRef.current.style.display='block';}

NB: This is a fast and easy way, not best practice but it gets the work done. The best-practice here is to use forwardRef and - super advanced - useImperativeHandle. Take your time and go through the documentation when you're ready.

CodePudding user response：

Login page will show "it is not active" first because active is set to false.but once you click on submit button it will show "it is active"

HomePage

const HomePage = () => {
    const[active,setActive]=useState(false);
    return (
        <div>
            <Navbar activesetter={setActive} />
            <Login activestatus={active} />
            <div id="content">
            </div>
        </div>
    );
}

Login

const Login = (props) => {

    return(
    <div>
        <div>
        {props.activestatus ? "it is active" : "it is not active" }
        </div>
    </div>

    );

}

Navbar

const Navbar = (props) => {
    const handleSubmit=(e)=> {
            e.preventDefault();
            props.activesetter(true);
        
    }
    return(
    <div>
        <form  onSubmit={handleSubmit}>
        <button  type="submit">Login</button>

        </form>
    </div>

    );

}