score:1
the map
function is intended to be used when you want to apply some function over every element of the calling array. i think here it's better to use a foreach
:
useeffect(() => {
let initialprices = {};
data.foreach(({ category, options }) => {
initialprices = {
...initialprices,
[category]: options[0].price,
};
});
setselectedprice(initialprices);
}, []);
score:0
from what i can see in your case, is that you want to populate initialprices
, and after that to pass it setselectedprice
. the map
method is not a solution, for you in this case, because this method returns an array.
a safe bet in your case would a for in loop
, a foreach
, or a reduce
function.
const data = [
{
category: "ball",
options: [
{
price: "120.45"
}
]
},
{
category: "t-shirt",
options: [
{
price: "12.45"
}
]
}
];
the foreach example:
let initialprices = {};
// category and options are destructured from the first parameter of the method
data.foreach(({ category, options}) => {
initialprices[category] = options[0].price;
});
// in this process i'm using the clojure concept to add dynamically the properties
setselectedprice(initialprices);
the reduce example:
const initialprices = object.values(data).reduce((accumulatorobj, { category, options}) => {
accumulatorobj[category] = options[0].price
return accumulatorobj;
}, {});
setselectedprice(initialprices);
score:1
your map
function should return something. here it's not the case so the error happens. maybe a reduce function will be more appropriate than map?
score:2
the map
function must return a value. if you want to create a new object based on an array you should use the reduce
function instead.
const reducer = (accumulator, { category, options }) => (
{...accumulator, [category]:options[0].price}
)
const modifieddata = data.reduce(reducer)
more information https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/reduce
Source: stackoverflow.com
Related Query
- How to solve "Expected to return a value in arrow function" error in eslint
- Expected to return a value at the end of arrow function on reactjs how to fix this error?
- React JS - Expected to return a value at the end of arrow function ES lint Error
- How to fix expected to return a value at the end of arrow function warning in react js?
- Async arrow function expected no return value
- How fix this warrning warning Array.prototype.map() expects a return value from arrow function array-callback-return?
- Expected to return a value at the end of arrow function with if statement
- Expected to return a value at the end of arrow function array-callback-return on filter function
- react warning Expected to return a value at the end of arrow function array-callback-return
- Expected to return a value in arrow function - useEffect
- How to tell TS explicitly that the return value of a function will be expected to be of a certain type?
- How fix warning "Expected to return a value in arrow function array-callback-return"
- How to fix linter expected to return a value at the end of react function component?
- Arrow function expected a return value
- 118:51: Expected to return a value at the end of arrow function array-callback-return
- warning Expected to return a value at the end of arrow function
- How to fix "Expected to return a value in arrow function array-callback-return"?
- Expected to return a value at the end of arrow function in react
- how to change jest mock function return value in each test?
- How do I fix "Expected to return a value at the end of arrow function" warning?
- how to solve the ` Component should be written as a pure function ` error in eslint-react?
- Eslint Error - Unexpected block statement surrounding arrow body; move the returned value immediately after the =>
- How to fix "Expected to return a value in arrow function" with reactjs?
- How to solve Eslint - Module.createRequire is not a function error?
- how to solve Component should be written as a pure function error in eslint-react?
- Expected to return a value at the end of this function array-callback-return in React JS
- How to fix 'Expected the return value to be a 31-bit integer' error react hooks
- How can a function value is displayed in a HTML tag with a return value from addEventListerner click?
- Can I omit Return value in arrow function in JavaScript?
- Arrow function should not return assignment Eslint
More Query from same tag
- Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware with redux tool
- React router history not render correctly
- "this" is undefined inside my Class
- How to add class to li tag in react-slick
- Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:84)
- Jest + Enzyme testing if an element was focused to
- React utility function to bind this keyword
- React JS, can't write nested array inside prop to console
- Delete all equal items from array
- useRef passed in as parameter needs to be added to dependencies?
- How to remove :focus pseudo class via react/ next js?
- How to trigger a function on a scroll event in react
- How to update React properties after a delay in time and constantly sort an array to the nearest specific number X?
- Disable Table pagination in material-ui Reactjs
- Unable to update initial state in real time using useState
- Mouse Wheel / Scroll event in React element without overflow (picture zoom)
- How do you mock just certain parts of a module with jest?
- How to imitate PaddingTop with Grid Material UI and fill empty rows from the top?
- Only show matching string in array when using 'useMemo' in react
- Record a changing input field in react-hook-form?
- Meeting multiple conditions that aren’t set simultaneously in componentWillReceiveProps
- Should Promises be avoided in React components?
- Instance in React
- React array being returned with no data, but there is data within the array with inspect element
- How to create Vuejs controlled input form?
- Using Modals within a table row
- React: validation on controllable input is not consistent
- how do i set programmatically checkbox property 'checked' or 'defaultChecked' in react
- Apollo React: How to refetch query when a different option is selected from select dropdown?
- Why are Vue DOM changes so slow?