Can't type inside an input-CodePudding

I can't change or type inside an input, I have the input inside a form and it's value set to user.email, when I try to change the text it won't type

const [email, setEmail] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        dispatch({type: "UPDATE_START"})
        const updatedUser = {
          userId: user._id,
          username,
          email,
        };
        try {
          const res = await axios.put("/users/" user._id, updatedUser);
          setSuccess(true);
          dispatch({ type: "UPDATE_SUCCESS", payload: res.data });
        } catch (err) {
          dispatch({type: "UPDATE_FAILURE"});
        }
      };
                
    <form className="settingsForm" onSubmit={handleSubmit}>
    <div >
                        <div >
                            <EmailIcon  />
                        </div>
                        <input type="text"
                        className="loginInput"
                        style={{ border: error ? '1px solid red' : '' }}
                        value={user.email}
                        onChange={(e) => setEmail(e.target.value)}/>
                    </div>
                <button
              className="loginButton"
              type="submit"
              disabled={isFetching}>
              {isFetching ? (
                    <CircularProgress size={15}/>
                ) : (
                <Typography
                variant="subtitle2"
                color="white">
                  Save Changes
                </Typography>)}
            </button>
    </form>

I don't what I'm missing here, and I don't want the user.email to be placeholder, I want to treat as a value and be changeable.

CodePudding user response：

You need to put only email in the value key. Because when setEmail function called, it will set the value at the email const. so you need to pass only email const at the value key like below :

<input type="text"
       className="loginInput"
       style={{ border: error ? '1px solid red' : '' }}
       value={email}
       onChange={(e) => setEmail(e.target.value)} 
/>

CodePudding user response：

onChange is set to set the email field to the original value when the value changes. So that's why trying to change it is not working

                 <input type="text"
                    className="loginInput"
                    style={{ border: error ? '1px solid red' : '' }}
                    value={user.email}
                    onChange={(e) => setEmail(e.target.value)}/>