react-select onChange event does not render with props

Question

i'm using the select-react library --> https://react-select.com/home

i have managed to mapped options to the individual items i will need from itemList. the dropdown do register the selected option, however my end goal is such that my bar chart renders the correct data of the selected option.

/**
 * Produces a filter list for item sales cards
 * @param {*} props
 * @returns the filter list of item names along with their ids
 */

export const ItemSelection = (props) => {
  const { onChangeValue, itemList } = props;

  if (itemList.length === 0) return <></>;

  return (
    <UncontrolledDropdown>
     <Select
        options={itemList.map((item) => {
          return {
            label: item.name,
            value: item,
            key: item.itemID,
          };
        })}
        onChange={(item)=>onChangeValue(item)}
        placeholder="ITEM"
      />
    </UncontrolledDropdown>
  );
};

itemSelection is being used here:

  const [itemID = '1', setItemID] = useState('1');
  const [itemName = '', setItemName] = useState('');
  const [itemListID = [], setItemListID] = useState([]);

  <ItemSelection
      onChangeValue={(item) => {
         setItemID(item.itemID);
         setItemName(item.name);
       }}
        itemList={itemListID}
    />

onChangeValue is the one registering the option selected to the barchart. Is there anyway to map onChangeValue?

Answer 1

It depends what argument you're actually expecting from the parent element that uses ItemSelection. That said, it also looks like Select takes a function that takes an action of type string and the option value as the second argument. The selected value would then come in the second argument.

Something along the lines of of the below code is what you need if all you care about is the value. On that note, you will get the selected string value passed to onChangeValue which I imagine is what you want without seeing the function definition from an ancestor component.

Updated:

The select code can take the entire option object as the second parameter.

export const ItemSelection = (props) => {
  const { onChangeValue, itemList } = props;

  if (itemList.length === 0) return null;

  return (
    <UncontrolledDropdown>
      <Select
        options={itemList.map((item) => ({
          label: item.name,
          value: item.name, // note a change from your code here; it would have been an object otherwise
          key: item.itemID,
        }))}
        onChange={(item)=>onChangeValue(item)}
        placeholder="ITEM"
      />
    </UncontrolledDropdown>
  );
};

In the parent component

  // note the changes here where I deleted the assignments
  const [itemID, setItemID] = useState('1');
  const [itemName, setItemName] = useState('');
  const [itemListID, setItemListID] = useState([]);

  <ItemSelection
    onChangeValue={(option) => {
      setItemID(option.key);
      setItemName(option.value);
    }}
    itemList={itemListID}
  />