I have a Select that get's values from API, then on change it gets the value from the select and renders a table. but I want the select to display planet.id and planet.name, but doing it using event.target.value wont work since it would pass both values and table wouldn't render! Any way of doing this passing for example 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>
            );

I have a Select that get's values from API, then on change it gets the value from the select and renders a table. but I want the select to display planet.id and planet.name, but doing it using event.target.value wont work since it would pass both values and table wouldn't render! Any way of doing this passing for example 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>
            );

• javascript
• reactjs

• where is value property in <option> tag? – Raviteja Commented May 11, 2018 at 11:08
• add value property to <option>. – Amanshu Kataria Commented May 11, 2018 at 11:09
• @Raviteja after adding a value={planet.id} made it work, but strangely it was working without the value property? – zemmsoares Commented May 11, 2018 at 11:12
• You'll able to select any option. To save the selected option you need value – Raviteja Commented May 11, 2018 at 11:15

2 Answers 2

You mean this?:

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

Try this

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