How to create a dropdown list from a json object?

Question

What am I doing wrong here? (probably everything). I'd like 'foo' to come up as the selection and the value when selected to be 1. The error I get is 'Objects are not valid as a React child'.

constructor(props) {
     this.state = {options: {name: 'foo', value: 1}};
  }

 render() {
    return (
        <div>
          <select>{this.state.options}</select>
        </div>
    );
}

Is options going to be an array of { name, value } objects? Not really sure how the current data structure translates to options — Rob M.
– Rob M., Commented Dec 20, 2016 at 19:20

Ben Nyberg · Accepted Answer · 2016-12-20 19:48:10Z

2

First of all, I think you'd want your options to be an array of objects. Then in your render function, do something like this:

constructor(props) {
  super(props);
  this.state = {options:[{name: 'foo', value: 1}]};
}
render() {
  return <div>
    <select>{this.state.options.map(function(item) {
      return <option value={item.value}>{item.name}</option>;
    })}</select></div>
}

edited Dec 20, 2016 at 19:48

answered Dec 20, 2016 at 19:23

Ben Nyberg

9527 silver badges13 bronze badges

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

3 Comments

nikotromus Over a year ago

made options an array of object and implemented your code. It doesn't bomb out anymore, but the list is empty.

Ben Nyberg Over a year ago

Does your constructor look like this?: constructor(props) { this.state = {options: [{name: 'foo', value: 1}] }; }

Ben Nyberg Over a year ago

Check out my latest edit, I think you need the call to super(props) in your constructor.

GG. · Accepted Answer · 2016-12-20 19:55:46Z

2

#1: You absolutely don't need to store these options in your component's state.

#2: Replace your object with an array and use Array#map to render each option.

render() {
  const options = [{ name: 'foo', value: 1 }]
  return (
    <select>
      {options.map(option =>
        <option value={option.value}>{option.name}</option>
      )}
    </select>
  )
}

answered Dec 20, 2016 at 19:55

GG.

22k14 gold badges93 silver badges133 bronze badges

1 Comment

nikotromus Over a year ago

Great advice! I do NOT need to store the values in a state.

Collectives™ on Stack Overflow

How to create a dropdown list from a json object?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related