Picker Item with dangerouslySetInnerHTML

[ZoltanSzilagyiCse]

Is it possible to use Picker elements (Items) with dangerouslySetInnerHTML? For me it gives the following result:

Code:

<Picker aria-label="X axis">
    {getInputFeatures()
        .flatMap(input => input.inputs)
        .map(input => (<Item key={input.id} textValue={input.name}>
            <div dangerouslySetInnerHTML={{__html: input.name}}/>
        </Item>))})}
</Picker>

The data:

{
   "inputs":[
      {
         "id":"Lambda1",
         "name":"λ<sub>1</sub>"
      },
      {
         "id":"Lambda2",
         "name":"λ<sub>2</sub>"
      },
      {
         "id":"Mu",
         "name":"µ"
      },
      {
         "id":"c",
         "name":"c"
      },
      {
         "id":"t",
         "name":"t"
      },
      {
         "id":"r",
         "name":"r"
      },
      {
         "id":"n",
         "name":"n"
      }
   ]
}

[LFDanLu]

@ZoltanSzilagyiCse Can you try wrapping the <div dangerouslySetInnerHTML={{__html: input.name}}/> within a <Text> (https://react-spectrum.adobe.com/react-spectrum/Text.html)? This allows the proper grid-area to be set on the element wrapping the text, positioning the element into the appropriate grid section

[ZoltanSzilagyiCse]

Woah, I never thought about this solution. Thanks, with this one, it's working! 🙇‍♂️