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.
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.
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'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.
So I'm trying to understand how to move focus when a new page loads in my application. This question came to my mind: what could I do if I want to focus on some element that is somewhere outside of my component. It seems to me that everywhere they write about the focus it's always used with refs. You can pass ref to a child. What if I want to focus on element to reset the focus on the page when a link is clicked and new page component is loaded? Or if I want to make skip link component higher in the tree and focus on a header in element? I have a lot of components, it doesn't seem a great idea to pass refs down through several components.
I feel like I'm missing something.
I'm interested about this because I'm learning about accessibility and how to make possible to navigate page only with keyboard.
what could I do if I want to focus on some element that is somewhere
outside of my component.
What if I want to focus on element to reset the focus on the page when
a link is clicked and new page component is loaded?
You can just pass callback of focus handler into your inner component and call it when you want.
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.