KubaK
Reactiflux3y ago
6 replies
Kuba

kuba_huba – 17-21 Sep 2

I was building a form today and I stumbled upon weird behavior. When I swapped buttons that were conditionally rendered, the event was firing when submit button was rendered.
<div className="mb-4">
  <div className="flex gap-2">
    <Button
      className="w-2/3"
      variant="outline"
      onClick={handleNavigationBackward}
      disabled={pagination.isFirstPage}
    >
      <IoArrowBack className="mr-2" /> Poprzednie
    </Button>
    {!pagination.isLastPage ? (
      <Button
        className="w-2/3"
        type="button"
        variant="outline"
        key="navigation_button"
        onClick={handleNavigationForward}
      >
        Next
        <IoArrowForward className="ml-2" />
      </Button>
    ) : (
      <Button className="w-2/3" type="submit" key="submit_button">
        Submit <IoPaperPlane className="ml-2" />
      </Button>
    )}
  </div>
</div>

Can anyone help me understand why adding a key was a valid solution?
Was this page helpful?