Question 194140 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to Map an array to an array with multiple objects within a Component

<MultiSelect
  id="MultiSelect-1"
  label="Label"
  onChange={function noRefCheck(){}}
  options={[
    {
      label: 'Checkbox 1',
      name: 'accounts',
      value: 'Checkbox 1'
    },
    {
      label: 'Checkbox 2',
      name: 'accounts',
      value: 'Checkbox 2'
    },
  ]}
/>

I have this multi selector and i have an array passed down from another component to this one. i need to basically map that data into options listen above so that name is taken from the mapping function rather than using index of array.

This is what i have done so far. Its manual work but i want to know whether i can do this via the map method.

<MultiSelect
  id="MultiSelect-1"
  label="Label"
  onChange={function noRefCheck(){}}
options={[
          {
            label: `${intl.formatMessage({
            id: `fld.value.receivablesreport.payment.types.${paymentTypes[0].toLowerCase()}`,
               })}`,
            name: `${paymentTypes[0]}`,
            value: `${paymentTypes[0]}`,
            checked: checkedPaymentTypes,
           },
           {
            label: `${intl.formatMessage({
            id: `fld.value.receivablesreport.payment.types.${paymentTypes[1].toLowerCase()}`,
                })}`,
            name: `${paymentTypes[1]}`,
            value: `${paymentTypes[1]}`,
            checked: checkedPaymentTypes,
           },
           ]}
/>

I tried doing mapping inside the options but it always fails. It will render the checkboxes but it wont render the value or the labels. Any help is appreciated I am a junior developer so still learning and havent faced this issue before.

Tags:

2

Answers


  1. 0

    you can do a simple Array.map() onto the options property as it will return a new mapped array.

    <MultiSelect
  id="MultiSelect-1"
  label="Label"
  onChange={function noRefCheck(){}}
  options={paymentTypes.map(paymentType => ({
    label: `${intl.formatMessage({
      id: `fld.value.receivablesreport.payment.types.${paymentType.toLowerCase()}`,
    })}`,
    name: `${paymentType}`,
    value: `${paymentType}`,
    checked: checkedPaymentTypes
  }))}
/>

    Anyway, you can separate the options mapping to another function, then invoke it inside the options property so the JSX would be more cleaner and shorter.

    Hope it helps.

    Login or Signup to reply.
  2. 0

    This is how you can dynamically generate the options based on the data in the paymentTypes array, avoiding the need for manual entry and reducing code duplication.

    <MultiSelect
  id="MultiSelect-1"
  label="Label"
  onChange={function noRefCheck(){}}
  options={paymentTypes.map((type) => ({
    label: intl.formatMessage({
      id: `fld.value.receivablesreport.payment.types.${type.toLowerCase()}`,
    }),
    name: type,
    value: type,
    checked: checkedPaymentTypes,
  }))}
/>

    To improve the code further, you can consider destructure the properties instead of accessing the properties through dot notation incase paymentTypes is a list of hashMaps.

    options={paymentTypes.map((type) => {
  const { id } = type;
  const label = intl.formatMessage({ id: `fld.value.receivablesreport.payment.types.${id.toLowerCase()}` });
  return { label, name: id, value: id, checked: checkedPaymentTypes };
})}

    You can also consider separating the mapping logic into a separate function: If the mapping logic becomes more complex or reusable. This improves readability and maintainability of your code.

    const mapPaymentTypesToOptions = (paymentTypes, checkedPaymentTypes, intl) => {
  return paymentTypes.map((type) => {
    return {
      label: intl.formatMessage({
        id: `fld.value.receivablesreport.payment.types.${type.toLowerCase()}`,
      }),
      name: type,
      value: type,
      checked: checkedPaymentTypes,
    };
  });
};


<MultiSelect
  id="MultiSelect-1"
  label="Label"
  onChange={function noRefCheck(){}}
  options={mapPaymentTypesToOptions(paymentTypes, checkedPaymentTypes, intl)}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search