CODEWITHSUNDEEP
javascriptreactjsinput
sultan.h
sultan.h

Reputation: 405

Can't type inside an input

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.

Upvotes: 0

Views: 55

Answers (2)

Darshan Patel
Darshan Patel

Reputation: 11

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

Upvotes: 1

ControlAltDel
ControlAltDel

Reputation: 35106

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

Upvotes: 0

Related Questions