I am using react select to create a dropdown of options. I want to access the label on the dropdown but also access an associated value with the data. For example:

import Select from 'react-select'


let options = [
 {
 label: Small,
 change: -3
 },
 {
 label: Medium,
 change: 0
 }
]

<Select id={"options"} defaultValue={options[0]} options={options} />

let selectedChange = // How can I access the change property?
let selectedLabel = document.querySelector(`#options`).textContent // This is how I have been getting the proper label

<button onClick={console.log(selectedChange, selectedLabel)}></button>

I would like to change the displayed cost of the item by adding the options change value to the default price, but I would only like to display the label in the select.

I am using react select to create a dropdown of options. I want to access the label on the dropdown but also access an associated value with the data. For example:

import Select from 'react-select'


let options = [
 {
 label: Small,
 change: -3
 },
 {
 label: Medium,
 change: 0
 }
]

<Select id={"options"} defaultValue={options[0]} options={options} />

let selectedChange = // How can I access the change property?
let selectedLabel = document.querySelector(`#options`).textContent // This is how I have been getting the proper label

<button onClick={console.log(selectedChange, selectedLabel)}></button>

I would like to change the displayed cost of the item by adding the options change value to the default price, but I would only like to display the label in the select.

• javascript
• reactjs
• jsx
• react-select

• Oh, I see it is built into the onChange, thanks so much. In testing I see that it returns all the values associated with the input data, so it returned label, value, and change. – Quddus George Commented Feb 25, 2020 at 16:02
• 3 Fixed my previous ment: The default format for options are { label: 'somelabel', value: 'someValue' } . When an option is selected, then Select's onChange will return the chosen object, (ie { label, value, etc }). – SILENT Commented Feb 25, 2020 at 16:02

1 Answer 1

The React-Select onChange prop takes a method, and receives both the selected item(s), as well as the action being performed:

function(
  One of<
    Object,
    Array<Object>,
    null,
    undefined
  >,
  {
    action required One of<
      "select-option",
      "deselect-option",
      "remove-value",
      "pop-value",
      "set-value",
      "clear",
      "create-option"
    >
  }
  ) => undefined

It is up to you, as the developer, to chose what to do with the object(s) returned from this method. For an example you can check this Codesandbox.