ReactJS Select Key

Question

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>
            );

@Raviteja after adding a value={planet.id} made it work, but strangely it was working without the value property? — zemmsoares
– zemmsoares, Commented May 11, 2018 at 11:12
You'll able to select any option. To save the selected option you need value — Raviteja
– Raviteja, Commented May 11, 2018 at 11:15

Raviteja · Accepted Answer · 2018-05-11 11:11:19Z

3

You mean this?:

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

answered May 11, 2018 at 11:11

Raviteja

3,48723 gold badges46 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

swapnil2993 · Accepted Answer · 2018-05-11 11:09:17Z

0

Try this

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

answered May 11, 2018 at 11:09

swapnil2993

1,39411 silver badges16 bronze badges

Collectives™ on Stack Overflow

ReactJS Select Key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related