ReactJS Select Key

Question

У меня есть Select, который получает значения из API, затем при изменении получает значение из выбора и отображает таблицу.но я хочу, чтобы select отображал planet.id и planet.name, но делать это с использованием event.target.value не получится, так как он передаст оба значения, а таблица не будет отображаться!Любой способ сделать это, например, key={planet.id}?

class Planet extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: 1};
       
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event){
        this.setState({value: event.target.value});
    }

    render () {

        let planets = this.props.state.planets;
        let optionItems = planets.map((planet) =>
                <option key={planet.id} >{planet.id}</option>
            );

Answer 1

Вы имеете в виду это?:

<option key={planet.id} value={planet.id} >{planet.id}-{planet.name}</option>

Answer 2

Попробуйте это

<option key={planet.id} value={planet.id}>{planet.name}</option>