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.
Related
As the title says I have two icon component that supposed to display the same SVG content, however, when the second gets called, the first disappears. Not from the DOM, just from the screen...
The case is that I'm displaying a content card and a modal filled with corresponding data.
These components are sharing a content object from a separate file. What makes them displaying relevant data is an index prop.
What I figured out is nothing matters but the two icon component.
This is how an icon component looks like:
getIcon is a simple switch function returning the icon based on name.
And this is how I import the SVGs:
Does anyone can help me with this please? Thanks in advance. No console errors.
The problem seems to be hoisting.
I had the modal declared first then the content that meant to be clicked to popup the modal.
This makes no sense for me in a component based architecture on the same component level... just wanted to try if always the first icon would disappear or not.
I have a application with navigation bar with links to course and assignment component. When we click on course, course component is getting loaded. Now I want to achieve a functionality where I click on one course respective assignment should be displayed. Assignment component is already present.
As per the information present here. A small model popup can be added on Course component click and on the click of that course component the popup will show all the assignments corresponding to that course. One have to create link to all the assignment components and keep a relationship between the assignment components and the course components in the links and load only those assignment component links in the model popup whichever course is clicked.
I'm new to reactJS, get confused when trying to create dynamic (antd) tab.
Basically, i have two layers in Application, the first one is Sidemenu Bar, located on left of the screen, and the second layer is content pages, which represented with Tabs.
The Sidemenu has some variable numbers of menu buttons (modules). When each button are pressed, then React will render that module (each module represent by individual JSfile) to the content layer, inside a new Tab panel. The module page itself, can be duplicated on the Tab.
To do that I created a sidemenu.js which contain a menu buttons (and its corresponding URL), and appPages.js to hold that Tabs that will render the specific module(s).
How to make it possible ? where I should write the routes (react-router-dom) ?
I search for this topic, and found it solved using the same js file, not the separated file or component.
Please check my sandbox here : https://codesandbox.io/s/dynamictabs-83mop
Thank you. Really appreciated for any help, and so sorry about my english.
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
My page is composed of hierarchy of classes and many reusable components. Multiple instances of a button component can exist anywhere in the page and on click they fire actions that populate different types of data in a common sidebar list component.
The requirement is to highlight the button that was last clicked to load the data in that sidebar list. Of course, it also means to remove highlighting from the previous button. Since these button can exist in different components, I cannot manage state in one parent component.
I am not able to find a solution in pure React. I don't want to use jQuery rather just stick to React. Note I do use Redux in the app though and would be fine with leveraging Redux state if required.
You should most definitely use Redux. You'll need to create a variable in Redux that gets updated whenever an action takes place that would require you to highlight the button on the page. Then use conditional styling for the button based on that variable.