score:0
I think filter
is not the correct function to use. Filter needs to filter object. You are trying to mutate them as well inside. The filter function is immutable which means that it generates a new array instead of an old one.
addToCarrito.filter((elemento, pos) => {
if (elemento.item.id === item.id) {
addToCarrito[pos].quantity += quantity; // <- mutating prev value(bad)
return false;
}
return true;
})
For this task is better to use an object, rather than an array. That will simplify a lot your code.
const [products, setProducts] = useState({})
const addProduct = (item, quantity) => {
// if product already in the object - take it, otherwise add new with 0 quatity
const newProduct = { ...(product[item.id] ?? {...item, quantity: 0}) }
newProduct.quantity += 1
setProducts(products => ({
…products,
[item.id]: newProduct
})
})
}
// here the array of your products, f.e. for iteration
const productList = React.useMemo(() => Object.values(products), [products])
Source: stackoverflow.com
Related Query
- How can I do in React so that once a product is added to the cart if that product has already been added before it does not repeat a new object?
- How can I do so that once a certain product is added to the cart, if that product has already been added before, it does not repeat a new object?
- How to display the last page when user clicks on add new row,so that user can view the newly added row using react js and prime react
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- how to pass the current item to the function so that i can remove it from array in react component?
- How can I add the item to cart page in react
- How can I redirect to another component in react and pass the state that I set in the previous component?
- How to modify the code such that can call usehook using react and typescript?
- How can I get rid of the `Node "13.0.0-nightly20190802452b393c1f"` so that I can be able to create a react app using the `create-react-app` tool?
- In React with Formik how can I build a search bar that will detect input value to render the buttons?
- How can I pass a value from the backend to a React frontend and use that value in the CSS for the frontend?
- How can I reverse the order that items are added to the fields in final-form/react-final-form-arrays so most recent is first
- How do you add an keyup event listener to window in a React functional component that only gets added when the app originally loads?
- how to capture the file of an input element so that I can pass it as an argument to another function in react
- How can I change the URL for a React app that I'm hosting myself and to which I forward a domain?
- Using React Big Calendar how can i change the color of the cell that i am pointing
- How can I test react component that fetches the data from firestore?
- How can I ensure that a line of code is executed only once using React hooks in a functional component?
- React - How can I reverse the order of dynamic children lists that have a key unique id
- How can I turn the data that is a image came from API to url to use in img tag in react Js
- How do you indicate that a request is loading, and then change the UI once a request is finished, with React Hooks?
- How do I implement a functional so that you can interact with the form only once for each user?
- Im building a React App that requires a pdf to download, in the event the (materialUI) download button is clicked, how can I add that functionality?
- How do i have an assets file that i can use in any file in my react app without always having to navigate to the assets folder
- How to Extract the id from a class div in react JS such that i can assign the value of div id to a variable in my code
- How can I use React Router to change routes from within a component that is also Routed in the Main App.js component?
- How can I ensure that React creates a new instance of a component, even if the component tree has not changed?
- How we can maintain the state of logged in and loggedout users and share that state to homepage in react redux
More Query from same tag
- React: Axios Error "Error: Network Error", My react app cannot receive axios.post response
- Reactjs RichTextEditor Custom Toolbar in .tsx
- React Navigation Reset Stack Navigator which is sub navigation
- forwardRef on Select does not save chosen value with react-hook-form
- Stop timer on button click in React
- React-Table V7 useSortBy Hook not working properly
- Property 'location' does not exist on type 'Readonly<{}> - React Router and Typescript
- When rendering an array of components, when a button is clicked always the latest element of the array is picked up
- How to deal with different variable name convention in backend api and frontend
- Getting undefined from a dropdown in React
- Problems while starting CRA with npm start
- Typescript throws no error when calling nullable function
- React Semantic UI Sidebar Issue
- How to setup Axios interceptors with React Context properly?
- Expo QR code not showing for a React Native App
- How do remove the extra div wrapper
- Is there a way to delay a spring until the image has loaded?
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How do I capture React Router dynamic parameters in the parent?
- How to dispatch an redux action to load data inside useEffect on page load
- How to sent argument to handler event in React render component not using lambda function?
- How to change the value of input to subscript?
- Why doesn't ReactJS autogenerate keys for dynamic children?
- Error: Cannot read properties of undefined (reading 'map') in reactjs project \
- What is the best way to build multi-language app with react and redux?
- How do I apply SSL certs to my React app and Spring boot server?
- Pass values from one component to another
- How to get last data and set a color in map foreach in reactjs
- Why does my github hook test return a 422 Unprocessable Entity?
- get index.html file& error 304 as result to get requests that has been sent to the server.js