How can I map array of strings in my select component?

Question

I've got a select component built on select tag. I have an object of data:

 const options= [
    { initialValue: "abc", data: ["data5", "data55", "data555"] },
    { initialValue: "zxy", data: ["data2", "data22", "data222"] },
  ];

Here I am getting 2 dropdown components with initial value but I am not getting data after initialValue.

So basically in my select I need abc, data5, data55, data555 and zxy, data, data2, data22, data222 But I am getting abc, data5data55data555 and zxy, datadata2data222

  {options.map((val, index) => {
        return (
          <Select>
            <option value="" key={index}>
              {val.initialValue}
            </option>

              <option value={`${val}`} key={index + 1}>
                {val.data}
              </option>;
          </Select>
        );
      })}

So you want, for example, 4 options from { initialValue: "abc", data: ["data5", "data55", "data555"] }, being "abc", "data5", "data55", and "data555"? — Drew Reese
– Drew Reese, Commented Dec 29, 2020 at 8:49
yeap exactly and I have done the below solution which did work for me that's why I asked here — user14695970
– user14695970, Commented Dec 29, 2020 at 8:53

topdev87 · Accepted Answer · 2020-12-29 08:49:10Z

1

Iterate the val.data by Array.map() to add several <option>.

{options.map((val, index) => {
  return (
    <Select>
      <option value="" key={index}>
        {val.initialValue}
      </option>
      
      {val.data.map((d, j) => (
        <option value={`${d}`} key={`options${index}-${j}`>
          {d}
        </option>
      )}
    </Select>
  );
})}

answered Dec 29, 2020 at 8:49

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

Comments

Rahul Sharma · Accepted Answer · 2020-12-29 08:50:11Z

0

You have to iterate data values also using the map.

const options = [{
        initialValue: "abc",
        data: ["data5", "data55", "data555"]
    },
    {
        initialValue: "zxy",
        data: ["data2", "data22", "data222"]
    },
];

{options.map((val, index) => {
        return (
          <Select>
            <option value="" key={index}>
              {val.initialValue}
            </option>
            {
                val.data.map((d, i) => (<option value={`${d}`} key={`${index}-${i}`}>{d}</option>))
            }
          </Select>
        );
      })}

answered Dec 29, 2020 at 8:50

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

1 Comment

user14695970 Over a year ago

this solution works, my problem was with key attribute

michael · Accepted Answer · 2020-12-29 08:54:12Z

0

You can use Array.map() two times.

{
  options.map((item, index) => (
    <select key={index}>
      <option value={item.initialValue}>{item.initialValue}</option>
      {item.data.map((value, index) => (
        <option value={value} key={index}>
          {value}
        </option>
      ))}
    </select>
  ))
}

answered Dec 29, 2020 at 8:54

michael

4,1733 gold badges15 silver badges31 bronze badges

Comments

Drew Reese · Accepted Answer · 2020-12-29 09:20:38Z

0

I suggest flattening your options first, then mapping the options using a single array and key set. It still "double maps" like several of the other answers here but does so in a more functional programming way, i.e. the second mapping isn't nested. It's a bit more DRY and (subjectively) easier to read IMO.

array.prototype.flatMap

Map each set of options to a single array (i.e. initialValue and data spread into it) value which is then overall flattened down to a single array of all the option values.

<select>
  {options
    .flatMap(({ initialValue, data }) => [initialValue, ...data])
    .map((option, index) => (
      <option key={index} value={option}>
        {option}
      </option>
    ))}
</select>

edited Dec 29, 2020 at 9:20

answered Dec 29, 2020 at 9:02

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

2 Comments

user14695970 Over a year ago

why do you suggest that?

Drew Reese Over a year ago

@Sonny49 Ah, basically just answered that just before you commented. It's more DRY as there is only a single function now creating option tags. I also believe it is easier to read since the logic flow has now been flattened, no nesting to read into.

Collectives™ on Stack Overflow

How can I map array of strings in my select component?

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related