I have a checklist of questions set up where I check if one of the checkboxes is selected I will show the first button. If no checkbox is selected I show the second "Submit" button. When a user clicks submit a messages shows up inside . What I also want to do for the UI, doesn't have to functionally submit at this point but would be great if it does is to hide the actual Submit button as soon as the button is shown.
So once the Submit button is clicked I want it to disappear off the screen.
Logic to see if the default submit button or second Continue button should be displayed:
const decideIfButtonShouldBeShown = (checked) => {
const answeredQuestion = data.questions.some(
(q) => q.answer === true
);
if (answeredQuestion)
setShowButton(true);
else
setShowButton(false);
}
const showOptionCardDisplay = () => {
setShowOption(logic.displayOption(data));
};
This is the button:
{
showButton ?
<IonButton
size="large"
color="secondary"
expand="full"
routerLink={'/newpage'}>
Contiunue
<IonIcon slot="end" icon={arrowForward} />
</IonButton>
:
<IonButton
size="large"
color="primary"
expand="full"
onClick={() => {
showOptionCardDisplay();
}}
>
Submit
</IonButton>
}
As I understand your expectation, you want to show your Contiunue button if there is at least one checked checkbox (one true in your answers).
Altough achieving this, would be as easy as:
const showButton = data.questions.some((q) => q.answer);
{showButton ? (
<IonButton
size="large"
color="secondary"
expand="full"
routerLink={'/newpage'}
>
Contiunue
<IonIcon slot="end" icon={arrowForward} />
</IonButton>
) : (
<IonButton
size="large"
color="primary"
expand="full"
onClick={() => showOptionCardDisplay()}
>
Submit
</IonButton>
)}
EDIT
Based on your comment, you would like to hide the Submit button too if it has been clicked.
The next solution would separate the logic for showing the second button, and it is set to false in showOptionCardDisplay. So basically you can control your first button visibility with decideIfButtonShouldBeShown and if the first button is not visible, then the second button can be shown conditionally.
const [showSubmitButton, setShowSubmitButton] = useState(true);
const [showButton, setShowButton] = useState(false);
const decideIfButtonShouldBeShown = (checked) => {
const answeredQuestion = data.questions.some((q) => q.answer);
if(answeredQuestion) {
setShowButton(true);
} else {
setShowButton(false);
}
}
const showOptionCardDisplay = () => {
setShowOption(logic.displayOption(data));
setShowSubmitButton(false);
};
{showButton ? (
<IonButton
size="large"
color="secondary"
expand="full"
routerLink={'/newpage'}
>
Contiunue
<IonIcon slot="end" icon={arrowForward} />
</IonButton>
) : null}
{!showButton && showSubmitButton ? (
<IonButton
size="large"
color="primary"
expand="full"
onClick={() => showOptionCardDisplay()}
>
Submit
</IonButton>
) : null}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments