How to push or create a new array with options and labels in ReactJS?

I am using react-select to implement a multi select dropdown. When I save the selected options to DB, I only save the selected options’ value and not their labels by using:

Array.isArray(selectedOption)
? selectedOption.map((x) => x.value) : null

Now I am retrieving the data that is saved from the DB and inserting it back to the dropdown so that the dropdown can has an existing/default value.

This is what is saved in the DB: staff,trainee

In order for the dropdown to read the value, I need to make it into an array which I have done by using .split(,) which the string then becomes ['staff','trainee'] as an array.

enter image description here

Then, I need to make it so that the array will turn into [{value: 'staff', label: 'Staff'}, {value: 'trainee', label: 'trainee'] with the value and label in it. I also need to cater for if the value is only a single option and not a multiple selected options.

Answer

You can using map to create a new array like this:

const newArray = ['staff','trainee'].map(item => ({value: item, label: item}))