I am trying to perform the following
Call a modal on a button click from say page 1.
Show the data passed from page 1 as content in the modal.
Come back to the page 1 on clicking the close button on the modal.
I wish to use a react modal to serve this purpose.
You can look any react model library
https://www.npmjs.com/package/react-modal
it has the example also, please check it
Related
Right now I have a App set up to take in Hotels and Images, then a Component to display the Rooms, however some of the Hotels have more than one image so I want to display them in a Modal that pops up, however I'm not sure how to do this or even get the Modal component to display
I've included the code in question below and I have made a seperate Modal Component, this is all linked at the following codesandbox
https://codesandbox.io/s/keen-rumple-8z0tho?file=/src/Components/Hotel.js
Since I noticed you used data-bs-target="#exampleModal", I figured you are using Bootstrap 5.
Here's a working example.
Changes overview:
added bootstrap 5,
added jotai, to manage shared state between <Hotel /> and <ModalHotel />. Note: you don't have to use jotai, you can use any other state management plugin of your choice, or React.useContext
on button click I pass current hotel's array of images to images atom, which is looped inside the modal
fixed filtering
renamed [hotel, setHotel] to [hotels, setHotels] and hotels to getHotels.
My problem is In my Main source page when i open one modal from that i will open another modal when i will click outside second modal then it would redirect me to main source page not in parent modal which is default behaviour
I think you should check the state of the second modal on the handling close of the first modal.
but if you share your code, we can better find the reason of this bug.
I have created an antd table on my page. In my table rows i have given an option to edit. The edit option is basically an icon which opens up a modal with the form in it.
When the user clicks on the submit button of modal the form submits and the field is edited.
Problem
My problem is that if i manage the state globally using redux then on clicking one edit icon all the modals open up together of all the table rows.
But i dont want that.I want to create a single component of modal and pass a form as a children prop and on submission of form my modal closes.
I used CreateRef to change the state of child component but wasnt able to achieve what i want.
I think your app dependency is like this App -> Table -> Row
<Modal> should be a separate component inside App, so only single <Modal> instance can display in the whole App
I am using React Modal Plugin to display the modals. I am trying to achieve to below scenario.
On button click a modal will open, inside the modal, i have another button, on click of this button, need to open another modal. but the first opened modal, should stay in the back. I didn't see any documentation regarding this.
That is already supported. Just nest the modal components. That is, inside the rendered content of the first modal, render another modal component. When you click the opening element of the second modal, it will appear in front of the first, while the first stays open in the background.
I have a list page, when click a row, will popup a modal view page to show its content, then in it click edit button, I want the popup view page can direct to edit page, that is from one modal view page redirect to another modal edit page, I use angularjs modal to show view page, so how can I change modal content to edit page?
You may fetch your template using $templateCache.get() or making http request.
Then compile it using $compile(template). After template compiling you can put your template anywhere you want in the DOM by using jQuery/jqLite — all angular bindings will work.
thanks to Girafa, I use a simple way(although code is some verbose). I create two Controller and when open view modal, pass $scope in the Options, then when click edit button, first call cancel current modal, then open edit view. like this:
$modalInstance.close('cancel');
$scope.openedit(id);