score:2
Accepted answer
Replace this line:
setIncomes(incomes.push(income));
With this
setIncomes([...incomes, income]);
The .push method returns the length of the array, not the actual array. You can use the spread operator to spread the current array and then add on the new item to the end of it.
Doing this should also work:
incomes.push(incomes)
setIncomes(incomes)
score:0
It's possible you're getting that error because the data coming back from your API isn't an array. Judging by your code, I'm guessing you're expecting a key/value map, which in JS is an object. You might be able to use Object.keys(incomes).map(...), but without knowing the specific response format, I can't say for sure.
There are 2 other issues with your code:
First, you can't push onto incomes because it's a React state array. Instead, you need to use the setIncomes callback...
setIncomes([...incomes, income])
Additionally, the way you're using Object.keys and Object.values is not correct. Again, can't say what the correct way is without knowing specifics of your response format.
Source: stackoverflow.com
Related Query
- Unable to update a list with react when its value is being changed using the hook useState function from React TypeError: map is not a function
- Unable to get the updated state when using React useState hook
- How to select a single list element when using map in React to alter the state value
- Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
- Unable to find an element with the text: "myText" error when using react-testing-library
- Unable to get the name of the input when using getByRole while testing with testing-library
- Why does react hook throw the act error when used with fetch api?
- When is the cleanup function triggered when using useEffect hook with dependencies?
- Error: Unable to find an element with the text when I try a test with Jest in React
- How to dynamically update the value for any input field with one event handler function, using hooks
- Trigger change events when the value of an input changed programmatically React
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- React app showing page with "404 the requested path could not be found" when using Apache
- React State update a nested array with objects based on the id when iterated
- Support callback for changing another field value when using React Hook Form validation
- Draft JS editor does not update it's content when its value changed by parent component?
- React: Trying to rewrite ComponentDidUpdate(prevProps) with react hook useEffect, but it fires when the app starts
- Getting duplicates when Incrementing & Decrementing using the Arrow keys with React JS
- React TypeScript callback reading undefined when using setState, but it will log the value
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- How to get the value of the span element with testid using react testing library?
- Next.js with next-redux-wrapper state is being reset to initial value when navigating using Link
- cant update context state when using hooks with a complex object to set providers value
- How to update specific value when the state is an array of objects - React
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- Error coming when using the state value in react using typescript
- Is there a way to set defaultValues in a child component using react hook form with useFieldArray hook - not using the useForm hook?
- React: how to avoid re-rendering a component with a hook that returns always the same value but changes its inner state
- React CRA with SSR configuration throws 404 when using the resulting html
- Update just one value of JSON object and keep the old ones with React Flux
More Query from same tag
- Matching a substring between two special characters EXCLUDING the characters
- "Cannot read properties of null (reading 'appendChild')" error in gatsby shows only on site refresh
- Redux action and async/await functions have different behavior at class component and functional
- why useSelector return undefined?
- How to Iterate through list of list objec in reactJs
- How to make axios get request dynamically in react.js?
- Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
- How can checkboxes be sorted (based on true-false status) in react-table?
- How to conditionally render a Material UI dialog with the fade in/out animations
- Hey i am very new in react i have to do a form validation using 'onChange' and if valid then only state should be change.How to do that in right way?
- Get type of sibling parameter
- REACT - How to pass a function to an axios api call
- How to use manual mock with typescript, react and jest?
- image preview is not working in react
- Refactoring styled components
- React - useCallback throwing error on renderProps function
- How to handle next Next js Router Queries and Params
- Converting "class" into "react hooks"
- How to scroll down with python selenium without known body height?
- Conditionally add reference inside loop
- Use DC.js Canvas Scatter Hover Information to Update Another Chart
- How to replace multiple strings in html in order to wrap items in a jsx component?
- firebase storage ref is not a function
- React > How to set focus on the input field after adding a new row by using react-table
- Passing form data to express
- Redux-Saga non-ajax related callback issue
- Google places autocomplete in react, don't display full address in places input
- Show component for each dynamic div in react
- Async onClick Event
- React 18: Hydration failed because the initial UI does not match what was rendered on the server
