So I’m trying to conditionally switch between two html buttons in ReactJS base on wether the form is shown or not. Basically if the form is shown, show a submit button and if not shown, show a regular button to show the form.
This is the code that I have. (I’m using Antd’s button component but I also tried using the regular html button and had the same problem.
<div>
{showForm ? (
<Button
loading={isUploading}
htmlType="submit"
form="videoForm"
className={Styles.button}
>
{isUploading ? 'Uploading' : 'Upload Video'}
</Button>
) : (
<Button
htmlType="button"
onClick={() => setShowForm(true)}
className={Styles.button}
>
{successMsg ? 'Upload Another Video' : 'Show Form'}
</Button>
)}
</div>
The issue I’m having is that when the form is not shown and I click the Show Form button, the form shows correctly and the buttons switch, but the form submit event is triggering which is not what I expected or want.
Any ideas why? And how I can fix this issue? I also tried doing the following but got the same results.
<div>
<Button
loading={isUploading}
htmlType={showForm ? 'submit' : 'button'}
form="videoForm"
className={Styles.button}
>
{showForm && (isUploading ? 'Uploading' : 'Upload Video')}
{!showForm && (successMsg ? 'Upload Another Video' : 'Show Form')}
</Button>
</div>
Any help would be greatly appreciated.