""" function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) { const [activeCard, setActiveCard] = useState('draftWill'); const [selectedWillCard, setSelectedWillCard] = React.useState({ willTypeName: 'Templated Full Will', willTypeID: '6', }); const { results } = useSelector(willsListSelector); const dispatch = useDispatch(); React.useEffect(() => { // dispatch<any>(fetchWillsList()); }, []); /** * Handles the click event on the card and sets the active card name. * * @param {string} cardName - The name of the card that was clicked. * @return {void} This function does not return anything. */ const handleCardClick = (cardName: string) => { setActiveCard(cardName); // log the card name console.log(cardName); // log active card console.log(activeCard); const { willTypeName, willTypeID } = results.find((will: any) => { if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will'; if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will'; return false; }) || { willTypeName: '', willTypeID: '' }; setSelectedWillCard({ willTypeName, willTypeID }); }; const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== ''; return ( <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg"> <Modal.Header closeButton> <Modal.Title className="modal-title">Choose Method</Modal.Title> </Modal.Header> <Modal.Body> <div> <div className="modal-choose-method-subtitle mb-3"> List your Substitute Beneficiaries below and click on Add Substitute to add them to your List </div> </div> <div className="d-flex flex-row"> <div className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`} style={{ width: '50%', marginRight: '10px', position: 'relative' }} onClick={() => handleCardClick('draftWill')} > {activeCard === 'draftWill' && ( <div className="check-icon" > <img src={FillCheckRoundIcon} alt="Fill Check Icon" /> </div> )} <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}> <img src={DraftWillIcon} alt="Will Copy Upload Icon" /> </div> <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}> Draft Will Using the System </div> <div className="text-center choose-method-draft-will-desc" style={{ marginTop: '10px', marginBottom: '10px' }} > It is a long established fact that a reader will be distracted by the readable content. </div> </div> <div className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`} style={{ width: '50%', marginRight: '10px', position: 'relative' }} onClick={() => handleCardClick('willCopyUpload')} > {activeCard === 'willCopyUpload' && ( <div className="check-icon" style={{ position: 'absolute', top: '10px', left: '10px', margin: '10px', }} > <img src={FillCheckRoundIcon} alt="Fill Check Icon" /> </div> )} <div className="choose-method-will-upload-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }} > <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" /> </div> <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}> Upload the Copy of Will </div> <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}> It is a long established fact that a reader will be distracted by the readable content. </div> </div> </div> </Modal.Body> <Modal.Footer className="justify-content-center"> { activeCard && ( <Link to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`} state={selectedWillCard.willTypeName} > <Button variant="primary" > Continue </Button> </Link> ) } </Modal.Footer> </Modal> ); } """ when component loads, card-container-draft-will is selected by default. when user clicks on card-container-will-copy-upload, that element is selected. But when user clicks on card-container-draft-will again after clickin will-copy-upload, problem is when clicking continue button, Link is not naviating to the indented component/page. it is not moving to indented page. please update the code. and make it correct. but now when i click on card-container-draft-will element, COnitnue button not showing. please fix this bug.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter