CODEWITHSUNDEEP
javascriptreactjsrxjs
Red Baron
Red Baron

Reputation: 7652

Why is my button triggering without click in RxJs fromEvent?

I have 2 questions about the same thing.

Firstly, is this the correct way to submit a form in RxJs? I am trying to subscribe to a mouseEvent and if it's a click it'll make a POST request to my backend

so in react I'm doing this:

useEffect(() => {
    const mouseClick$ = fromEvent(buttonEl.current, 'click').subscribe(console.log('hi123'))
})

the console.log is where I'll perform my API POST eventually. however, whenever I reload my page, it's immediately logging out hi123, why is this?

  <button ref={buttonEl}>
        Submit
    </button>

why is this happening? I was hoping the subscribes would only get triggered on click (which by the way they arent at the moment only on load :/)

Upvotes: 0

Views: 153

Answers (2)

Christian Held
Christian Held

Reputation: 2828

The subscribe function accepts a function. You should call console.log() from a function.

Bascially you are passing the result of console.log() which is undefined.

useEffect(() => {
    const mouseClick$ = fromEvent(buttonEl.current, 
'click').subscribe(evt => console.log('hi123'))
    // Unsubscribe, when the conponent is unmounted:
    return () => mouseClick$.unsubscribe();
})

Upvotes: 0

HermitCrab
HermitCrab

Reputation: 3274

Because useEffect is called when your component is mounted and in your case (because you have no dependecy array) for every update.

You don't need useEffect to process a form, just create a regular function, such as onSubmit and process your form there

Upvotes: 1

Related Questions