question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

multi value select uses getOptionValue for react key, doesn't work for non-prim values.

See original GitHub issue

I use non-primitive values for my options (providing a getOptionLabel to turn them into strings.) The problem is https://github.com/JedWatson/react-select/blob/916ef8f2813dbdd7bb5adb186ab3a085d40003c3/src/Select.js#L1478

uses the value for the react key. When isMulti={true}, I see a lot of:

image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:6
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
nicolas-zozolcommented, Jul 19, 2019

The good way to work with complex object value is to use getOptionValue() and getOptionLabel(). It’s not very clear but works very well, as we had exactly the same problem.

const CustomSelect = (props) => {
  return (
    <Select
     getOptionValue=(option)=>option.user.id
     getLabelValue=(option)=>option.user.fullName
      {...props}
    />
  )
}


2reactions
james-pradocommented, Apr 30, 2019

Nvm, this doesn’t work because the custom component still gets wrapped for some reason 😕

Screenshot from 2019-04-30 18-04-18

Read more comments on GitHub >

github_iconTop Results From Across the Web

Retrieving value from <select> with multiple option in React
The same way you do anywhere else, since you're working with the real DOM node as the target of the change event: handleChange:...
Read more >
How to Get Selected Value from a Mapped Select Input in React
Building select input elements is straightforward when working on web projects. But with the emergence of JavaScript frameworks and ...
Read more >
Advanced - React Select
A flexible and beautiful Select Input control for ReactJS with multiselect, ... Using the react-sortable-hoc package we can easily allow sorting of ...
Read more >
Handle the onChange event on a Select element in React
Set the onChange prop on the select element. Keep the value of the selected option in a state variable. Every time the user...
Read more >
Lists and Keys - React
This code logs [2, 4, 6, 8, 10] to the console. In React, transforming arrays into lists of elements is nearly identical. Rendering...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found