Warning: Unknown event handler property `onValueChange`. It will be ignored

Question

I know this question has been asked before. I've gone through solutions I've seen but none has worked for me unfortunately. Would really appreciate an extra set of eyes to help me see where I may have gone wrong.

Thanks

<div>
    <Input
        style={{ maxWidth: '200px', marginRight: '8px' }}
        data-type="text"
        placeholder="Search"
        onValueChange={(Value) => {
          setFilter(Value);
        }}
        value={filter}
      />
</div>

EDIT

As requested here is some more information about the Input prop.

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    [key: string]: any;
    type?: InputType;
    bsSize?: 'lg' | 'sm';
    state?: string;
    valid?: boolean;
    invalid?: boolean;
    tag?: string | React.ReactType;
    innerRef?: React.Ref<HTMLInputElement>;
    plaintext?: boolean;
    addon?: boolean;
    className?: string;
    cssModule?: CSSModule;
}

Did you tried with Value all lowercase, so it looks like `onValueChange={(value)...` — N.Tasikj, Apr 27 '22 at 18:57
@N.Tasikj Hi, yes it was originally lowercase, saw a suggestion online that said change it to uppercase which is why it's like that now. — Temi Owolabi, Apr 27 '22 at 19:05
Does this answer your question? [Warning: Unknown event handler property \`onHeaderClick\`. It will be ignored](https://stackoverflow.com/questions/53945281/warning-unknown-event-handler-property-onheaderclick-it-will-be-ignored) — Derek Lawrence, Apr 27 '22 at 19:07
Also if you could share the library that `Input` is imported from, that would be great. — Chris Gilardi, Apr 27 '22 at 19:45

score 0 · Answer 1 · answered Apr 27 '22 at 20:50

The attribute for a value change is onChange (not onValueChange).

<div>
    <Input
        style={{ maxWidth: '200px', marginRight: '8px' }}
        data-type="text"
        placeholder="Search"
        onChange={(value) => {
          setFilter(value);
        }}
        value={filter}
      />
</div>

As convention, function parameters should start with a lowercase letter, so as you can see I've changed case on the provided arrow function.

To understand this, you should have reviewed the documentation and followed the inheritance chain back through InputHTMLAttributes to DOMAttributes until you found the definition of the handler attributes. There you will see there is no onValueChange, but onChange.

Also, a simple Google search through this up as a set of example of how to process change events. RTFM ;-)

Warning: Unknown event handler property `onValueChange`. It will be ignored

1 Answers1