Bug: Form submit is triggered when a non submit type button is pressed about react

[nmain]

@sylsaint React's reuse of the DOM node here is expected given the reconciliation algorithm's specifications and constraints, and the way you've structured your JSX. You're returning the same VDOM structure each time with a <button> in the same place, but only the attributes on it are different.

The docs go into a lot of depth on this sort of scenario https://react.dev/learn/preserving-and-resetting-state

[nmain]

The corresponding no-framework code:

<form><button type="button">Click me</button></form>

document.querySelector("button").addEventListener("click", e => { e.target.setAttribute("type", "submit"); });

will do the exact same thing and also fire the submit event. So isn't this the intended behavior? If it's not what you want, your proposed workaround with key is probably the cleanest.

[gaearon]

Hm yea this seems confusing but matches how the DOM works. I think I'll close this.

[sylsaint]

@nmain Your code is based on the the same DOM node, it's ok. But in react they are actually different node, during render process, react reuse last DOM node, just modify its properties.

[sylsaint]

@gaearon Yes, it's confusing. But actually it's caused by react that reused the same DOM node for different buttons.