I'm new to rxjs, When try to create event for incrementButton, it throw error as
No overload matches this call.
The last overload gave the following error.
Argument of type 'Element | null' is not assignable to parameter of type 'JQueryStyleEventEmitter<any, unknown> | ArrayLike<JQueryStyleEventEmitter<any, unknown>>'.
Type 'null' is not assignable to type 'JQueryStyleEventEmitter<any, unknown> | ArrayLike<JQueryStyleEventEmitter<any, unknown>>'. TS2769
In the below snippet Line:8 Col:35 incrementButton throw error
import { Fragment, useState } from "react";
import { fromEvent } from "rxjs";
const SimpleCounter = () => {
const [result, setResult] = useState(0);
const incrementButton = document.querySelector("incBtn");
const increaseCount = fromEvent(incrementButton, "click");
return (
<Fragment>
<h1>{result}</h1>
<button id="incBtn">Increase</button>
</Fragment>
);
};
I tried type casting like below still it got failed
const increaseCount = fromEvent(<JqueryStyleEventEmitter> <unknow> incrementButton, "click");
const increaseCount = fromEvent(incrementButton as JqueryStyleEventEmitter as unknown, "click");
There are 2 changes I have done to my code. Now it is working.
const incrementButton = document.querySelector(
"#incBtn"
) as HTMLButtonElement;
useEffect(() => {
const incrementButton = document.querySelector(
"#incBtn"
) as HTMLButtonElement;
const increaseCount = fromEvent(incrementButton, "click");
increaseCount.subscribe(() => {setResult(result++)});
});