Как передать массив из выбранного компонента элемента HTML в два текстовых компонента, которые имеют разные значения в массиве

Question

Я пытаюсь получить значение цены из элемента select после того, как выбрал значение.например, описание товара: "Numbers Invo Qt", цена продажи: "100".Но я написал код ниже, и когда я запускаю его, я получаю эту ошибку. Цена продажи возвращает «неопределенный».

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

import React, { Component } from 'react';
import _ from 'lodash';

const ITEMS = [
  { name: 'initial', text: 'Select Items', value: '' },
  { name: 'centos', text: 'Invo qt', value: 'Numbers Invo qt', price: "100" },
  { name: 'ubuntu', text: 'Invo xp', value: 'Numbers Invo xp', price: "180" },
  ]
  const SelectComponent = (props) => (
    <select name={props.name}
     onChange={props.handleSelect}
      >
      {_.map(props.items, (item, i) => 
        <Option
            key={i}
        name={item.name}
        value={item.value}
        text={item.text}
        price={item.price}
        handleSelect={props.handleSelect}
      />
)}
</select>
);

const Option = (props) => (
<option 
value={props.value}
>{props.text}</option>
)

export default class CustomerComboBox extends Component {
constructor() {
    super()
    this.state = {
      selected: '',
      selected_Price: ''
    }
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(e) {
    e.preventDefault();


    //console.log(e.target);

    this.setState({
        selected: e.target.value,
        selected_Price: e.target.price,
    })
    document.getElementById('stock-description').value = e.target.value;
    document.getElementById('stock-price').value = e.target.price;

  }

render() { 
    return ( 
        <div>
            <div>
                <SelectComponent 
                name="testSelect" 
                items={ITEMS}
                price={ITEMS.price}
                handleSelect={this.handleSelect}
                />
            </div>
            <p>Stock Description</p>
            <input id='stock-description' placeholder='Item Description'></input>
            <p>Stock Price</p>
            <input id='stock-price' placeholder='Selling Price'></input>
        </div>
     );
}
}

Answer 1

Цена так не пройдет.Мой совет будет, чтобы onChange передать весь объект.

onChange={ (e) => props.handleSelect(props.items[e.target.value]) }