React-select: Props for custom label and custom value keys

Created on 23 Jul 2019 · 5Comments · Source: JedWatson/react-select

Are you making a feature request?

Provide as much information as possible about your requested feature. Here are a few questions you may consider answering:

What's your use case? (Tell us about your application and what problem you're trying to solve.)
What interface do you have in mind? (What new properties or methods do you think might be helpful?)
Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)

I have noticed that any select component in this library only works with 'label' and 'value'. My API doesn't return json with those keys and if I want to display some value in that json, I would have to map my values to 'label' and 'value' in order to work with it. To be specific, I had that problem in Async and AsyncSelect components. It would be awesome if there would be props like customLabel and customValue (those names are just example). I want to avoid mapping values, because that only makes code bloated.

If there is already those props in Async and AsyncSelect from 'react-select/async' I apologize for this issue, but I was not able to find them.

Source

Ryukote

👍2

Most helpful comment

you can do it using ( getOptionValue , getOptionLabel )

full example about it

   import ReactDOM from "react-dom";
  import Select from "react-select";

  import React, { PureComponent } from "react";

  class App extends PureComponent {
    constructor(props) {
      super(props);
      this.state = { selectedOption: null };

      this.users = [
        { id: 1, name: "Ali" },
        { id: 2, name: "Mark" },
        { id: 3, name: "David" },
        { id: 4, name: "Sarah" }
      ];
    }

    handleChange = selectedOption => {
      this.setState({ selectedOption });
      console.log(`Option selected:`, selectedOption);
    };

    render() {
      return (
        <div>
          <Select
            value={this.state.selectedOption}
            onChange={this.handleChange}
            options={this.users}
            getOptionValue={option => option['id']}
            getOptionLabel={option => option['name']}
          />
        </div>
      );
    }
  }

  export default App;

AliMohammad93 on 19 Sep 2019

👍2

All 5 comments

Both props already exist since v2.x. They call themselves getOptionValue and getOptionLabel and are both props that accept functions with the option as the argument. These props are available in all variants of the Select: Basic, Async and Creatable.

<AsyncSelect
    getOptionValue={option => option.id}
    getOptionLabel={option => option.detail.name}
/>

Rall3n on 24 Jul 2019

👍2

Hmmm I tought those are for something else. Can I set string in those as a value instead of option?

Ryukote on 24 Jul 2019

@Ryukote No. Both props accept functions as values, and both have to return the value you want as value/label.

Rall3n on 12 Aug 2019

you can do it using ( getOptionValue , getOptionLabel )

full example about it

   import ReactDOM from "react-dom";
  import Select from "react-select";

  import React, { PureComponent } from "react";

  class App extends PureComponent {
    constructor(props) {
      super(props);
      this.state = { selectedOption: null };

      this.users = [
        { id: 1, name: "Ali" },
        { id: 2, name: "Mark" },
        { id: 3, name: "David" },
        { id: 4, name: "Sarah" }
      ];
    }

    handleChange = selectedOption => {
      this.setState({ selectedOption });
      console.log(`Option selected:`, selectedOption);
    };

    render() {
      return (
        <div>
          <Select
            value={this.state.selectedOption}
            onChange={this.handleChange}
            options={this.users}
            getOptionValue={option => option['id']}
            getOptionLabel={option => option['name']}
          />
        </div>
      );
    }
  }

  export default App;

AliMohammad93 on 19 Sep 2019

👍2

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!