How do I use RXJS fromEvent in React?

Question

I\'m trying to log the click event on a button in react:

const InputBox = () => {
  const clicky = fromEvent(
    document.getElementById(\'clickMe\'),
           


        

Answer 1

did you try by query selector? like this

const InputBox = () => {
  const clicky = fromEvent(document.querySelector('button'),'click')
     .subscribe(clickety => console.log({ clickety }));

  return (
    <button type="button">
      Click Me
    </button>
  );
};

that's works for me

Answer 2

Wrap it in useEffect() that's when the dom is ready

const InputBox = () => {
  const buttonEl = React.useRef(null);

  useEffect(() => {
    const clicky = fromEvent(buttonEl.current, 'click').subscribe(clickety =>
      console.log({ clickety })
    );

    return () => clicky.unsubscribe();
  }, []);

  return (
    <button ref={buttonEl} type="button">
      Click Me
    </button>
  );
};