i'm creating a simple login/signup form in react. The idea behind this form, is that above the form you have two button, one saying login, and the other sign-up. If you click on the login, you are in the login. But if you click on signup, it renders the signup page. To let user see where they are currently, under the two buttons there is a line that should change position when a button is clicked. Here is the react and css code:

React:

import React, { useState, useEffect } from 'react';
import '../styles/style.css';

const Login = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [actMargin, setActMargin] = useState('0px');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Submitted')
    };

    const changeHandlerL = () =>{
        setActMargin('0px');
        console.log(actMargin);
    }

    const changeHandlerS = () => {
        setActMargin('77px');
        console.log(actMargin);
    }

    return <form className='containerLogin' onSubmit={handleSubmit}>
        <h1>Login</h1>

        <div className="choose">
            <button id="logS" onClick={changeHandlerL}>Login</button>
            <button id="sigS" onClick={changeHandlerS}>Sign Up</button>
            <div className="linea" style={{"margin-left":{actMargin}}}></div>
        </div>

        <p>Email:</p>
        <input type="text" name="email" value={email} onChange={(e)=>setEmail(e.target.value)}/>
        <p>Password:</p>
        <input type="password" name="password" value={password} onChange={(e)=>setPassword(e.target.value)}/>
        <button className="sign">Forgot Password?</button>

        <button type="submit" id="sub" >Login</button>

        <p>Don't have an account?<button className="sign">Sign up</button></p>
    </form>
}

export default Login;

CSS:

@import url('https://fonts.googleapis.com/css2?family=Mochiy Pop P One&display=swap');

:root {
    --black: #000000;
    --white: #ffffff; 
    --dark-blue: #1a3491;
    --night: #050f30;
    --grey: #6b728c;    
  }

body{
    background: linear-gradient(to left, var(--night), var(--dark-blue));
}

*:focus{
    outline: none;
}

.containerLogin{
    background:var(--white);
    display: flex;
    flex-direction:column;
    letter-spacing:1px;
    margin:auto;
    padding: 30px;
    text-align:center;
    font-family: 'Mochiy Pop P One', sans-serif;
    margin-top: 150px;
    border: var(--white) solid 2px;
    max-width: 450px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
}

.containerLogin h1{
    margin-bottom: 50px;
}

.containerLogin .choose{
    margin:auto;
    display: flex;
    flex-direction: row;
    margin-bottom: 50px;
    border-radius: 5px;
}

.containerLogin .choose button{
    border: none;
    background: var(--white);
}

.containerLogin p{
    margin-bottom: 20px;
}

.containerLogin input, .containerLogin input:focus{
    margin-bottom: 20px;
    border: none;
    border-bottom: 2px solid black;
    font-size:12pt;
    background: var(--white);
}

#sub{
    margin: auto;
    margin-top: 20px;
    max-width: 100px;
    background: var(--dark-blue);
    color:var(--white);
    padding: 8px;
    border-radius: 10px;
    border:none;
    transition:1s;
}

#sub:hover{
    background-color: var(--night);
}

.sign{
    padding: 8px;
    border-radius: 10px;
    border:none;
    background: var(--white);
    color:var(--dark-blue);
    transition: 1s;
}

.sign:hover{
    background: var(--dark-blue);
    color:var(--white);
}

#logS, #sigS{
    border: none;
    padding:10px;
}

.linea{
    position:absolute;
    width: 70px;
    height: 6px;
    margin-top: 40px;
    background: var(--dark-blue);
    border-radius: 2px;
    transition:1s;
}

The state I created should track the pixels of marign left that the line has. In the console, i can see that the state is changing correctly, but nothing changes. I guess it is a problem with the style syntax, as I read in some other posts, but I can't fix it. Can someone help me? Thanks

Another things: can I use ternary operators inside a style tag in JSX? For example: <div style={{'background':{isMorning ? 'white': 'black'}}}>CIAO</div> I ask because it shows that it is uncorrect on VSCODE. Thank you so much

CodePudding user response：

Could you try it with

<div className="linea" style={{"margin-left":{actMargin}}}></div>

changed to

<div className="linea" style={{marginLeft : actMargin }}></div>

The syntax seems to be wrong

Ternaries are definitely wrong too, that is why VS code is yelling an error.

<div style={{'background':{isMorning ? 'white': 'black'}}}>CIAO</div>

Should be

<div style={{'background': ( isMorning ? 'white': 'black' ) }}>CIAO</div>

CodePudding user response：

css and div changes would work, needs more edit on it logically

.noMargin {
margin-left: 0px
}
.hasMargin {
margin-left: 77px
}

<div className={actMargin==='0px' ? "noMargin"  : "hasMargin" }></div>

you can very well change logic of actMargin