I need help in Reactjs app 'Add to cart'. I am using redux and to add products to cart with quantity and everything going right until tried to add specific attributes such as size or color and I don't know how to handle this can anyone explain me the logic to do it?
Related
I need a bit of direction. I'm working on an application with React, Typescript, and Material UI. I've created a simple modal. The first page contains an MUI DataGrid with checkSelection enabled. The User can select as many options as appear on the table.
Now, for each selection, the User will then have a new form step to complete. So, if the User selects 5 items from the table, they will then see 5 corresponding steps. The form steps are tied to the selection. So, if the first selection is a menu item, for example, then the next step in the form will be about that menu item, with fields to add to that item.
I've been searching for a similar solution and haven't found one. I'm hoping that someone can point me in the right direction or has some sources they can recommend.
Much appreciated.
I want to build a simple app like in picture attached with react js, I just cannot find the right idea of:
How to "select" photos(or item) in an application and have the "cart"-like component appear at the bottom when at least one photo/item is selected(and close and deselect all already selected photo/items) and expand the cart-like component at the bottom when clicked to show what's been already selected.
What is the best approach to this?
P.S I'm new to react with a big idea in mind xD
app's view
This question definitely needs more information, but I will try to point you in the right direction. There are hundred of ways to create the UI/functionality you are describing but here is a very generic overview;
The "items" (Img1-6) looks like a grid of ShopItem components, possibly in a CSS Grid / flexbox. Each ShopItem would probably make use of an onClick method to "do something" when it is clicked - this may involve updating a state (using the useState react hook) somewhere which tells you if a ShopItem is checked or not. It could also potentially use a callback method to do something in the parent when the items are checked.
I imagine that each ShopItem may own its own "checked" state or may update a global state (Such as Zustand or Redux) or a Context (React) when it is toggled on and off. The checked state of a ShopItem would also inform the UI of the component.
The "cart-like" component could be looking at the global state/context/callback from the item component, and could change based on its value and how many checked items there are. (Eg/ checkedItems !== 0 ? show : don't show)
This is just one way in which this UI can be built, if you would like a more specific solution, please edit your question to include code snippets and what you've already tried.
I have a list of time pickers in my application to let the user chose the opening times for his store, so he can chose from_time,to_time and the day as shown in the picture.
the problem is i want to control this list so i can add a new time, delete, modify
I am using Antd V3.
I'm not sure if I got your question, but here is what I have got
https://codesandbox.io/s/nice-curran-kkx10
by the way, that snippet could help you to understand the use case of keys with list in React.
I’m new to react&redux and trying to build app using react-redux and I need help. When I click on add new person the form shows up, when I fill the form and click save button the values from the form (name, job title, phone, birthday) should be added to the table, and operations are always the same for everything(the value of operations row is "default" two buttons edit and delete ). I try to create reducer that will get the values from the form and add it to the table but I didn't achieve that. I don’t know how to define reducer so that happened when I click save button. Can someone help me how to solve this? Thank you. Here is the link of the project.
https://codesandbox.io/s/condescending-hill-0xiht
I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.