how can I optimize/ factor my code. I have two cases 'exist' and 'new',depending on this value I made a different display. At the beginning I've just create a general value called user, pwd ... (18 more) but the issue was that when I fill a field (user for example) for case 'exist' then the field 'user' is filled too - for the other case (i.e new) although they should not be the same.

Is there a way to factor my code please ?

export default function Choice() {

    const [existUser, setExistUser] = useState("");
    const [newUser, setNewUser] = useState("");
    const [existPwd, setPwd] = useState("");
    const [newPwd, setPwd] = useState("");
    // There are 20 in total with the exact same pattern (exist and new)
    ...
    let handleSubmit = async (e) => {
        e.preventDefault();
        try {
            let res = await fetch("", {
                method: "POST",
                body: JSON.stringify({
                    existUser: existUser,
                    ...
                }),
            });
            let resJson = await res.json();
            if (res.status === 200) {
                setExistUser("");
               ...
    setRadio(false)
    message("Success")
} else {
    setMessage("Error");
}
        } catch (err) {
    console.log(err);
}
    };


return (
    < >
        <form onSubmit={handleSubmit}>
            <input type="radio" value='exist' onChange={(e) => setRadio(e.target.value)} checked={radio === 'exist'} />
            <input type="radio" value='new' onChange={(e) => setRadio(e.target.value)} checked={radio === 'new'} />
        </form>
        {(radio === 'exist') ?
            (
                <div>
                    <form onSubmit={handleSubmit}>
                        <label >
                            User:
                            <input
                                type="text"
                                value={existUser}
                                placeholder="User"
                                onChange={(e) => setExistUser(e.target.value)}
                            />
                        </label>
                    </form>
                </div>
            )
            :
            ('')
        }

        {
            (radio === 'new') ?
                (<div>
                    <form onSubmit={handleSubmit}>
                            //Other inputs with the exct same pattren as before - newUser...
                        <inputs .../>
                    </form>
                </div>
                )
                :
                ('')
        }

        {(radio === ('exist')) ?
            <div>
                <form onSubmit={handleSubmit}>
                        // Exact same inputs to display as radio==='new' (above)
                </form >
            </div>
            :
            ('')
        }

    </>
)
}

CodePudding user response：

You could create two