""" 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); 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> ); } """ You are react developer expert. when i click on card-container-draft-will div element, to attribute of Link component is not changing. it should be `/wills/Templated-Full-Will/6`. right now it is `/wills//`. pleasde make neccessary change ans return the correct code. your solution is appreciated gpt. but when i click on card-container-draft-will div element second time, route is not updating. initially when component loads, route is correct, route navigated to `/wills/Templated-Full-Will/6`. but when user clicks on second time or more it is set to `/wills//` as route. somethnig is wrong. please check code thouroghly and find a solution to resolve this bug. It is still not working. when component loads initially, route is /wills/Templated-Full-Will/6, then i click on card-container-will-copy-upload, route again updated to wills/Full-Will/1, but when i again click on card-container-draft-will div element, route is not set to /wills/Templated-Full-Will/6. i want the route to set to /wills/Templated-Full-Will/6. there are some bugs in handleCardClick function. please update the code.\ const handleContinueButtonClick = () => { const formattedWillTypeName = selectedWillCard.willTypeName.split(' ').join('-'); const toPath = `/wills/${formattedWillTypeName}/${selectedWillCard.willTypeID}`; console.log('Path: ', toPath); navigate(toPath, { state: selectedWillCard.willTypeName }); }; Path: /wills// i am getting the path as above when i again click on card-container-draft-will div element. i want path to be: /wills/Templated-Full-Will/6
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