• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

80
Vistas
react reconciliation causes unexpected result

hi I have a question about react reconciliation.

here's my code

const Foo = () => {
   const [buttonId, setButtonId] = useState(1);

   const handleClick = (e: React.MouseEvent) => {

      // when I uncomment below line, submit is blocked.
      // e.preventDefault();

      // when I comment below line, form submission not occurred. 
      // it makes sense because Btn2 Element doesn't exist never anymore 
      setButtonId(2);
   };

   const handleSubmit = () => {
      // when click Btn 1, handleSubmit is called and printed 'submit!'
      console.log('submit!');
   };

   return (
      <form onSubmit={handleSubmit}>
         <input type="text" name="dummy" value="dummy" />

         // Why is the form submitted when I clicked on Btn 1? 
         {buttonId === 1 ? (
           <button type="button" onClick={handleClick}>Btn 1</button>
         ) : (
           <button type="submit">Btn 2</button>
         )}
      </form>
   )
};

When I click button1, form submission is processed even though button1 don't have type="submit".

What's even weirder is that when I uncomment e.preventDefault() in button1 onClick handler and click it, form submission don't happened.

Why is the handler that handling the click event(handleclick) bounded to the first button involved in the submission event of the next button? Is it expected and right result in react reconciliation?

I guess that it is a problem that occurs in the process of updating the type of element during the reconciliation process.

I already know that registering different keys to each button can solve this issue. but I want to know why this happens.

Who's gonna give me a clear thought?

Please check out this link: https://codesandbox.io/s/ecstatic-wozniak-s7r7rq?file=/src/App.js

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Try adding a key to the button element, so React knows that those are different elements

    <form onSubmit={handleSubmit}>
      <input type="text" name="dummy" value="dummy" />

      {buttonId === 1 ? (
        <button key="1" type="button" onClick={handleClick}>
          Btn 1
        </button>
      ) : (
        <button key="2" type="submit">Btn 2</button>
      )}
    </form>
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda