CODEWITHSUNDEEP
reactjstypescriptionic-framework
Pianoc
Pianoc

Reputation: 797

Hide React button after it is clicked

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>
}

Upvotes: 1

Views: 922

Answers (3)

Jan
Jan

Reputation: 357

Thank for answers, Ive used this info to create play/pause button

const [playing, setPlaying] = useState(false);
const play = () => { 
    if (playing == true){
      // stop and start again
      player.playbackManager.pause(); 
      setPlaying(false);
    }else{
      // play 
      player.playbackManager.play();
      setPlaying(true);
    }
  };


  return (
   <div>
   <div className="controller-bar"> 
        <IonButton component="span" onClick={play}>
           
 {playing ? ( <PlayArrow />  ) : (   <Pause/> )}
        </IonButton> 
  </div>
  );
}

Upvotes: 0

Martin
Martin

Reputation: 2273

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}

Upvotes: 2

Masudul Hasan Shawon
Masudul Hasan Shawon

Reputation: 522

check this

if(answeredQuestion )
      setshowButton(true);
    else
      setshowButton(false);

You wrote either set variable name in wrong there or wrong in here - showButton ?

I mean check character lower case issue in showButton name.

Upvotes: 0

Related Questions