Involuntary form submit when rendering submit button in 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.