Получить несколько значений при выборе одного раскрывающегося списка с помощью ReactJS

Question

Моя цель - получить несколько значений при выборе раскрывающегося списка, например: id, цена и срок.

На данный момент я могу получить одно значение при нажатии на раскрывающийся список, вот мои примеры кодов.

const [value, setValue] = React.useState("");

const packageList = [
    {
        id: 1,
        name: "Premium 1 Year",
        price: "100",
        term: 2
    },
    {
        id: 2,
        name: "Premium 2 Year",
        price: "150",
        term: 2
    },
    {
        id: 3,
        name: "Premium 3 Year",
        price: "300",
        term: 2
    }
];

const _onSubmit = React.useCallback(
    () => {
        console.log("value", value);
    }, [value]
)

<FormControl fullWidth className={classes.selectFormControl}>
    <Select
      value={value}
      inputProps={{
      value: value,
      name: "package-option",
      id: "packageOption",
      onChange: event => {
         setValue({
           value: event.target.value
          });
        }
     }}
     >
        {packageList.map(({ id, name }) => {
           return (
             <MenuItem
                classes={{
                  root: classes.selectMenuItem,
                  selected: classes.selectMenuItemSelected
                 }}
                 value={id}
              >
                   {name}
              </MenuItem>
             );
          })}
     </Select>
</FormControl>

<Button color="primary" fullWidth onClick={_onSubmit}>
    Submit
</Button>

Я ожидаю, что всякий раз, когда пользователь выбирает опцию из выпадающего списка, он отображает лайки:

id: 1,
price: "100",
term: 2

Answer 1

вы можете использовать все три значения id, price и term в качестве объекта и передать его в значение prop опции

const [value, setValue] = React.useState({
   name: 'mango',
   id: 1,
   price: 2000
});

<select value={value.name} onChange={this.handleChange}>
    <option value={{name:'papaya', id:2, price:2500 }}>papaya</option>
    <option value={{name:'lime', id:3, price:1500 }}>Lime</option>
</select>