What is the best way to get the selected value from a React-Select component?

Question

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.

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.