handleChange event Typescript - reactjs

Question

I am trying to implement search bar but it seems it doesn't work.
const [dataCoupons, setDataCoupons] = useState<Coupon[] | undefined>(coupons);
const handleChange = (e: ChangeEvent<HTMLInputElement> & { length: number }) => {
let couponsFilter = dataCoupons;
if (e.length > 0) {
Object.keys(e).forEach((k) => {
if (e[k].value === 0) {
couponsFilter = couponsFilter
?.slice()
.filter((x) => x.durationType.localeCompare('ONCE') === 0);
}
if (e[k].value === 3) {
couponsFilter = couponsFilter?.slice().filter((x) => x.valid === true);
}
if (e[k].value === 4) {
couponsFilter = couponsFilter?.slice().filter((x) => x.valid === false);
}
});
} else {
couponsFilter = coupons;
}
setDataCoupons(couponsFilter);
};
<Select
onChange={handleChange}
isMulti
options={options}
isClearable={isClearable}
classNamePrefix='select'
/>
I have an error message for each e[k]
What am i missing ?

Answer 1

There are two main things stopping you from getting value.
You're protecting with if (e.length > 0) {}
e does not normally have length property because it is an object. If you watched closely, TypeScript does tell you that. It is why you had to add & { length: number } to stop TypeScript from complaining.
If you were to do something like below (without the above mentioned protection)
Object.keys(e).forEach((k) => { console.log(k) })
And then went and triggered change event, you would be able to observe that the console is printing out string keys of all the properties that are attached to e object directly.
One of those properties is target property. You are most likely after that property. Going along the lines of your thinking (how you wrote your code), you would most likely need something like below:
Object.keys(e).forEach((k) => {
if (k === "target") {
console.log(e[k].value);
}
});
The above will capture value from the input field.
I have to warn you though that it seems like a very unsustainable way of creating forms and getting their values. It would be probably best to read this before you proceed.
Also, here's Sandbox to see it in action in most simple implementation.