Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can't display popup after click

I am trying to display popup when ‘Propose’ button is clicked.

TestPopUp.tsx

const TestPopUp = () => {
  return (
    <div>
     <p>TEST</p>
    </div>
  );
};

export default TestPopUp;

CandidateActions.tsx

    //..
import  TestPopUp  from '../../TestPopUp';
//..
const CandidateActions = ({ candidate, positionId }: CandidateActionsProps) => {
  const [showPopup, setShowPopup] = useState(false);
//...
  console.log(showPopup);
  return (
    <>
      <ActionsGroup
        actionsData={[
          {
            title: 'Propose',
            onHandleClick: () => {
              alert("Propose clicked, setting showPopup to true");
     
              setShowPopup(true);
              <TestPopUp />

              console.log('after')
              console.log(showPopup)

              if (!isSubmitting) {
                setIsSubmitting(true);
                apiProposalsService
                  .postProposal(candidate.id, positionId)
                  .then(() => {
                   );
                      //..
                    }
                    }
                  })
                  .catch((error) => {
                   //..
                    } else {
                      //..
                    }
                  })
                  .finally(() => setIsSubmitting(false));
              }
            },
          },
          {
            title: 'Skills',
            onHandleClick: () => {
              setSkillsModalOpen(true);
            },
          },
        ]}
      />
      <CandidateSkillsModal
        candidate={candidate}
        isOpen={skillsModalOpen}
        onClose={() => {
          setSkillsModalOpen(false);
        }}
      />
    </>
  );
};

export default CandidateActions;

Additional notes : alert "Propose clicked, setting showPopup to true" is displayed.
as for logging showPopUp : enter image description here
Don’t know why true and false are displayed many times. There are no errors, only popup isn’t displayed

Tags:

2

Answers


  1. 0

    only popup isn’t displayed

    You’re not actually displaying it anywhere. You do have this random line of JSX in the middle of a function:

    <TestPopUp />

    Which does nothing. Outside of that function, in the overall markup, is where you’d put your markup. For example, something like this:

    <ActionsGroup
  ... your existing code, mostly
/>

{ showPopup && <TestPopUp /> }

<CandidateSkillsModal
  candidate={candidate}
  isOpen={skillsModalOpen}
  onClose={() => {
    setSkillsModalOpen(false);
  }}
/>

    Basically, the click handler function doesn’t try to forcibly display the element. The function just updates state. The element is conditionally displayed based on that state.

    Login or Signup to reply.
  2. 0

    You should use inside anywhere in random line of jsx format.

     // inside return component
....your rest code here
{ showPopup && <TestPopUp /> }
....your rest code here
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search