CODEWITHSUNDEEP
reactjsformsbutton
Nícolas Amarante
Nícolas Amarante

Reputation: 325

Involuntary form submit when rendering submit button in ReactJS

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?

Upvotes: 8

Views: 1702

Answers (3)

Suleman Mughal
Suleman Mughal

Reputation: 97

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>

Upvotes: 0

Praveen kumar
Praveen kumar

Reputation: 1

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;

Upvotes: 0

alexpmac
alexpmac

Reputation: 211

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.

Upvotes: 21

Related Questions