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?

Mabe

If I replace the "if/else" conditional operator ("?" and ":") for two && conditional operators, the form doesn't submit automatically. – Gangway

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.

Jehovah

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Missing

Also make sure that keys on these two buttons are different, ex.: key="buttonSend" and key="buttonShowSubmit". – Pignus

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;

Tufts

Answer 3

I also faced the same issue but i dont know why but i was able to solve it when you explicitly render each differently with the same conditions.

for example, in this code if you place this condition separately it works.

<form method="POST" action="#" onSubmit={(e) => e.preventDefault()}>
    {showSubmit === true (
    <button type="submit">Send</button>)}

    {showSubmit === false (
    <button type="button" onClick={(e) => setShowSubmit(true)}>
     Show Submit</button>)}
</form>

Ransell