Map data in React to array of objects

Question

When using react-select it demands an array of objects, not of data. https://github.com/JedWatson/react-select/issues/5032 "react-select does not actively support options that are just simple strings."

I have a list of cities, and I need to change that list to an object

[{ label: "city", value: "city" }].
    const [selectData, setSelectData] = useState([{ label: "city", value: "city" }]);

function This iterates over the data and should create an object array. But it doesn't....

const CreateSelectData = () => {
var getSelectDataList = [];
allCities.map(
  (city, index) =>
    (getSelectDataList = [...selectData,{label:city, value: city])
);
setSelectData(getSelectDataList);
};

output

 <Select
        options={selectData}
        className='optioncity'
        value='Select a city'
        onChange={handleCityChange}
      />

I have no idea what I have done wrong, but I have looked at it for hours :-) The Select never loads at all

Assuming allCities is coming from an API call, please try this as soon as the array is available: setSelectData(allCities.map(city => ({label: city, value: city})));. — jsN00b
– jsN00b, Commented Mar 23, 2022 at 2:19
The Select never loads at all - at what point in the control-flow is CreateSelectData method being invoked? — jsN00b
– jsN00b, Commented Mar 23, 2022 at 2:24

Nick Vu · Accepted Answer · 2022-03-23 02:30:33Z

1

map is to transform from the original object into another object, but for your case, you should use forEach instead. And you should expand getSelectDataList which is your new array instead of selectData

const CreateSelectData = () => {
var getSelectDataList = [...selectData]; //initialise with your initial `selectData`
allCities.forEach((city, index) => {
   getSelectDataList = getSelectDataList.push({ id: index, name: city })
});
setSelectData(getSelectDataList);
};

If you want to use map. You can try this way

const CreateSelectData = () => {
   var getSelectDataList = allCities.map((city, index) => ({ id: index, name: city })); //create a new list with your expected value
   setSelectData([...selectData, ...getSelectDataList]);
};

edited Mar 23, 2022 at 2:30

answered Mar 23, 2022 at 2:19

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ayush Dubey · Accepted Answer · 2022-03-23 02:19:10Z

0

in your function change

allCities.map((city) =>
    (getSelectDataList = [...selectData, { label: city, value: city }])
);

to

allCities.map((city) =>
    (getSelectDataList = [...getSelectDataList, { label: city, value: city }])
);

answered Mar 23, 2022 at 2:19

Ayush Dubey

1501 gold badge1 silver badge7 bronze badges

1 Comment

Ayush Dubey Over a year ago

a better option might be to use a reduce statement than a map. what you are doing should work but its better to use a reduce.

Collectives™ on Stack Overflow

Map data in React to array of objects

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related