[GH-ISSUE #158] Picker onSelect returns index, not value #101

New issue

Closed

opened 2026-05-05 11:42:04 -06:00 by gitea-mirror · 3 comments

gitea-mirror commented

2026-05-05 11:42:04 -06:00

Owner

Originally created by @n8jadams on GitHub (Jun 17, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/158

Here is my code that I used to test out the Picker component:

import React, { Component } from 'react';
import {
  render,
  Window,
  App,
  Box,
  Picker
} from 'proton-native';

class Main extends Component {
  handleOnSelect = selectedIndex => {
    console.log(selectedIndex);
  }

  render() {
    return (
      <App>
        <Window
          title="Testing Pickers"
          size={{w: 500, h: 300}}
        >
          <Box>
            <Picker onSelect={this.handleOnSelect}>
              <Picker.Item>Option 1</Picker.Item>
              <Picker.Item>Option 2</Picker.Item>
              <Picker.Item>Option 3</Picker.Item>
            </Picker>
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Main />);

Is it possible to extract the text from the selected Picker.Item? In this example "Option 1, 2, etc...".

I can only get the index... which is useful, but I also wanted the value at the selected index.

I tried adding another argument to the setMessage function and that was always undefined.
I also tried making a ref for the Picker... but got confused as to how to navigate the ref and virtualDOM...

If there is a solution to this, it would be great to add to the docs!

Out of all the JS libraries for desktop apps, this is my favorite, even though it's still just getting started. :) Thanks!

Originally created by @n8jadams on GitHub (Jun 17, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/158 Here is my code that I used to test out the `Picker` component: ``` import React, { Component } from 'react'; import { render, Window, App, Box, Picker } from 'proton-native'; class Main extends Component { handleOnSelect = selectedIndex => { console.log(selectedIndex); } render() { return ( <App> <Window title="Testing Pickers" size={{w: 500, h: 300}} > <Box> <Picker onSelect={this.handleOnSelect}> <Picker.Item>Option 1</Picker.Item> <Picker.Item>Option 2</Picker.Item> <Picker.Item>Option 3</Picker.Item> </Picker> </Box> </Window> </App> ); } } render(<Main />); ``` Is it possible to extract the text from the selected `Picker.Item`? In this example "Option 1, 2, etc...". I can only get the index... which is useful, but I also wanted the value at the selected index. I tried adding another argument to the `setMessage` function and that was always `undefined`. I also tried making a `ref` for the Picker... but got confused as to how to navigate the `ref` and virtualDOM... If there is a solution to this, it would be great to add to the docs! Out of all the JS libraries for desktop apps, this is my favorite, even though it's still just getting started. :) Thanks!

gitea-mirror closed this issue

2026-05-05 11:42:05 -06:00

gitea-mirror commented

2026-05-05 11:42:10 -06:00

Author

Owner

@mischnic commented on GitHub (Jun 17, 2018):

Is it possible to extract the text from the selected Picker.Item? In this example "Option 1, 2, etc...".

You could do this as a workaround:

const vals = ["Option 1", "Option 2", /* ... */];

// ...

    <Picker onSelect={index => console.log(vals[index])}>
        {vals.map((v, i) =>
            <Picker.Item key={v}>v</Picker.Item>
        }
    </Picker>

I also tried making a ref for the Picker... but got confused as to how to navigate the ref and virtualDOM...

There is no such thing as a DOM for the native UI.

If there is a solution to this, it would be great to add to the docs!

Yes, the docs should refer to the "(selection) index" rather than the "selection".

And this should be "number" instead of "bool":

a938308d14/docs/component_APIs/picker.md (L63-L69)

@mischnic commented on GitHub (Jun 17, 2018): > Is it possible to extract the text from the selected Picker.Item? In this example "Option 1, 2, etc...". You could do this as a workaround: ```js const vals = ["Option 1", "Option 2", /* ... */]; // ... <Picker onSelect={index => console.log(vals[index])}> {vals.map((v, i) => <Picker.Item key={v}>v</Picker.Item> } </Picker> ``` > I also tried making a ref for the Picker... but got confused as to how to navigate the ref and virtualDOM... There is no such thing as a DOM for the native UI. > If there is a solution to this, it would be great to add to the docs! Yes, the docs should refer to the "(selection) index" rather than the "selection". <br> And this should be "number" instead of "bool": https://github.com/kusti8/proton-native/blob/a938308d1424da503582ea7818ef6379a9b6b259/docs/component_APIs/picker.md#L63-L69

gitea-mirror commented

2026-05-05 11:42:14 -06:00

Author

Owner

@n8jadams commented on GitHub (Jun 17, 2018):

I was about to add that workaround for this scenario that I figured out myself and then you edited your reply, haha. Nice work. Thanks for the help!

@n8jadams commented on GitHub (Jun 17, 2018): I was about to add that workaround for this scenario that I figured out myself and then you edited your reply, haha. Nice work. Thanks for the help!

gitea-mirror commented

2026-05-05 11:42:16 -06:00

Author

Owner

@khanhas commented on GitHub (Jun 18, 2018):

@mischnic And text type should be string

@khanhas commented on GitHub (Jun 18, 2018): @mischnic And `text` type should be `string`