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.
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.
Hi how do create dynamic tabs? I wrote like this for 2 tabs. If it is more, it automatically adds those tabs. Can you please help with this?
From that, it should create 2 tabs. And it should set the correct URL when you click on the tab. If it gets more dictionary items in the array then it creates more tabs
What your searching for is React.createElement.
You can create a component from a string :
React.createElement('Upgrade')
for example.
However, dynamically creating a function in Webshop seems not feasible.
If you only need to do a history.push(PATH), I would recommend putting the function inside an onClick event. I'm not sure how do you want it to work.
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 using Codename One. I'm doing an app which have a Form, that has a Tab component with 14 tabs inside, every tab has a gridlayout with 42 buttons, and I want to change a property in one button.
The problem is that I don't know how to reach that button.
tabG.getContentPane().components.get(index)
tabG is the tab component, and I can reach the tab that I need, but after that I don't know how to reach the button index I want to change.
I tried
tabG.getContentPane().components.get(index).components.get(indexbutton)
But even can't compile this code.
I'll apprecciate any help.
When you create the tab you need to prepare information to find the component later. E.g. if all tabs derive from the same class then just do something like:
MyBaseContainer cnt = (MyBaseContainer)tabs.getTabComponentAt(index);
Button theButtonINeed cnt.getMyImportantButton();
If this is more complicated you can use setName() or putClientProperty to prepare hints for you during form construction.