Can't type inside an input

sultan.h 0
Viewed 47

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 class="relative w-full">
                        <div class="flex absolute
                        inset-y-0 left-0 items-center pl-3
                        pointer-events-none">
                            <EmailIcon class="w-5 h-5" />
                        </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.

input reactjs javascript
2 Answers

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)} 
/>
usera3ec10

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)}/>
ControlAltDel0
Related