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.
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.
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.
There is a tile (molecule) with an image, some text and a play button. When the button is triggered a video should be shown via a modal. I think a modal should be an organism, but i want the modal to be part of the tile, which is an molecule.
The modal should be part of the tile, because its easier to use it that way.
I dont want always wire them up from inside an other organism, template or view.
Should i make the modal to a moclecule or should i make the tile to an organism?
Any advice?
I know this is an old question, but I recently stumbled on this while trying to figure out basically the same thing and wanted to add my two cents.
Note: I just started learning about atomic design, so this could be completely wrong - Take it for what it is, an opinion.
Brief background
In my case, I have a component (lets call it Form A) which is going to live inside of Modal A. Modal A is a very simple modal which is more of just a dialog modal (basically just contains open/close functionality) but it happens to have a form inside of it in this case.
Since the Modal technically contains a form (molecule) visually, I initially figured this must be considered an organism, or at the very least, another molecule.
My Solution
After thinking on this for a while, and referring to https://atomicdesign.bradfrost.com/chapter-2/ for guidance, in my instance the following sentence made it clear for me. (in my opinion)
These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional."
In my mind, going by this logic, I can break my modal down all the way to the atomic level...
If I remove the Form A component from the modal content, the modal is still functional (just has no content). To me, this tells me that I should in fact make a general Modal component and label it as an atom.
After I have a Modal atom component, I can simply pass it children to change the content of the modal. This allows me to easily have a Modal A, Modal B, Modal C component which in my opinion would then be an organism since at that point it is implementing the molecules to create a larger component.
Possible Answer?
So, if I were going to try to answer your question while using my own logic:
I would personally create a simple general re-usable modal component as an atom, then I would create an organism, say <PlayVideo /> which has inside of it the
<Modal props={modalSpecificProps}>
<Video />
{any other content to display in the modal}
</Modal>
With <Video /> being a child along with whatever else should be displayed inside the modal.
The only thing I would say I'm still unsure about myself is, can something be an atom, but still technically allow children to be placed in the atom as well?
Anyways, food for thought for anyone else that stumbles across this.
I have made a navbar, which holds a searchbar, and 3 icons.
On clicking these icons, a modal is rendered.
I wanted help with two things.
Closing the modals on outside clicks!, and
The hover element is slow because it has three states, every time it is called it re-renders the code from bottom to top. I wanted the hover to have one state assigned to one parent element. But on doing that, the hover effect for all three buttons gets activated at the same time.
Code is up on : https://codesandbox.io/s/unruffled-snowflake-he95w
Please feel free to edit the code and pass me the edited fork.
I have tried handleBlur, passing an event, and eventListener.
https://codesandbox.io/s/unruffled-snowflake-he95w
Expected - Modal rendered on screen should get disappeared on clicking outside the modal.
P.S - semantic UI icons are not rendering, but they are there. They will activate if you hover over them.
Credits - SVG close icon problem solved by Drew Reese.
Ah, I see. Your ToolBar is the controlling component, i.e. the state about whether or not each toolbar item is open is stored there. You need to pass a close handler to the children components so when a "close" button is clicked it is calling the callback the parent passed in.
Here is a fork of your sandbox where I pass in an onCloseClick callback to the calendar/picker thing that simply toggles that state value back to false to close it. The picker then just assigns that callback as its onClick handler for the contaning for the close button.
You can apply the same logic to the other two components.
Note: since the icons aren't rendering for me either I added some text to the buttons so they are easier to find/see.