Involuntary form submit when rendering submit button in ReactJS - reactjs

Question

I'm getting trouble to understand the following situation in ReactJS.
I have a conditional rendering between two buttons: a button which shows another, basically. The second button is a submit type, and both buttons are inside the form. When I click at the first button to show/render the second one, in my understanding, it should just show the second button, and not submit the form automatically.
I reproduced the case with the create react app:
function App() {
const [showSubmit, setShowSubmit] = useState(false);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<form method="POST" action="#">
{showSubmit ? (<button type="submit">Send</button>)
:
(<button type="button" onClick={() => setShowSubmit(true)}>
Show Submit
</button>)}
</form>
</header>
</div>
);
}
Why does the ReactJS automatically fires the submit event if I just want to show/render the submit button?

Answer 1

Posting here for anyone in the future who encounters this issue (probably me) - the issue you've described can be remedied by adding a key prop to the button elements, to let react distinguish between the button elements you're replacing.

Answer 2

Handle the form onSubmit function prevent the default function call, when ever you try to click on any button inside the form it will try to submit the form so use the e.preventDefault() to prevent it from submitting.
You can try handling the submission yourself using the onSubmit on the form tag instead of letting the browser do it for you.
import React, { useState } from 'react';
import './style.css';
function App() {
const [showSubmit, setShowSubmit] = useState(false);
console.log('state', showSubmit);
return (
<div className="App">
<header className="App-header">
<img src={'logo'} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<form method="POST" action="#" onSubmit={(e) => e.preventDefault()}>
{showSubmit ? (
<button type="submit">Send</button>
) : (
<button type="button" onClick={(e) => setShowSubmit(true)}>
Show Submit
</button>
)}
</form>
</header>
</div>
);
}
export default App;