getting error React does not recognize the `handleChange` prop on a DOM element

Question

I am trying to make one login form in react .but I am getting this error

React does not recognize the handleChange prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase handlechange instead.

input value is also not setting input field when I type in input field it is not updating the state why ?

here is my code https://codesandbox.io/s/quirky-clarke-qbkjw

<form noValidate>
      <TextBox
        label="Username"
        name="username"
        type="text"
        helperText="Assistive text"
        handleChange={handleChange}
        handleMouseDownPassword={handleMouseDownPassword}
        value={userId}
      />
      <TextBox
        label="Password"
        name="password"
        type="password"
        helperText="Assistive text"
        value={password}
        showPassword={showPassword}
        handleChange={handleChange}
        handleClickShowPassword={handleClickShowPassword}
        handleMouseDownPassword={handleMouseDownPassword}
      />
      <div className="button-group">
        <button>LOGIN</button>
      </div>
    </form>

Answer 1

In the TextBox component you're passing all the props from the parent via {...props} . Considering that TextField itself doesn't have handleChange property, I assume it passes it down to the underlying input DOM element, which doesn't recognise that prop.

What you can do is to extract the props used inside TextBox and collect the rest using the rest argument, so you don't end up passing unnecessary props down:

export default function TextBox({handleChange, handleClickShowPassword, handleMouseDownPassword, value,  ...props}) {

Another option is to remove {...props} from the TextField component and explicitly pass all the necessary props.

Updated Sandbox

Answer 2

React doesn't like uppercase letters in the prop names. Instead of passing "handleChange", pass "handlechange". You will get a similar error for "handleMouseDownPassword".

Regarding the input issue, I don't think you've provided enough context. But you have to have a handleChange method to update the state each time the field is changed.

Answer 3

I changed the handleChange() function, you were only setting the VALUE state, you need to set the state userId when you write on the first input, and the password when you write to the second input

At b.js add props name={stateName} so the handleChange() can know which input is controlling

Check Demo for more: https://codesandbox.io/s/gracious-heisenberg-z4q4z

(other answeres explained why you are getting that error in console ...props)