function that returns a select with options, using React

Question

I have a JSON of courthouse that contains one id and one name. The JSON contains an unlimited number of courthouses. I need to create a <Select> full of <Option>. the <Option> value will be the id, and the <Option> content will be the name.

So i got this function

createSelectCourtHouse:function(){
    return ( 
    <Form.Field className='form-control' type='select' name='request.courthouse_id' id='accused_lastname' placeholder="Nom de l'accusé" id='accused_lastname' onChange={this.handleChange.bind(this, 'accused_lastname')}>
       this.state.courthouseData.forEach(function(courthouse) {
           return (
               <option value={courthouse.i}>{courthouse.name}</option>
           );
       })
    </Form.Field>)
},

but it seems like i can't do a forEach inside a return. So i tried this way :

var field = ( 
      <Form.Field className='form-control' type='select' name='request.courthouse_id' id='accused_lastname' placeholder="Nom de l'accusé" id='accused_lastname' onChange={this.handleChange.bind(this, 'accused_lastname')}>
         this.state.courthouseData.forEach(function(courthouse) {
              <option value={courthouse.id}>{courthouse.name}</option>
          });
      </Form.Field>
    )
return field;

But it doesnt work. I feel like im close to getting the answer but simply cant get the hand on it. Any ideas ?

TL;DR : I need to create a select with option filled with value from a JSON.

forEach doesn't return anything, you probably want to use reduce — Ruan Mendes
– Ruan Mendes, Commented Feb 25, 2016 at 23:44

Mulan · Accepted Answer · 2016-02-25 23:54:03Z

3

You might want to read Why Select Value? in the docs

It's not clear to me why you've created Form.Field abstraction when the select element is perfectly find for expressing your needs

<select className="form-control" name="request.courthouse_id">
  {this.state.courthouseData.map((courthouse, i) => (
    <option key={i} value={courthouse.id}>{courthouse.name}</option>
  ))}
</select>

This has the added benefit of being able to pass a value prop to the select element that will properly display the default/chosen option.

answered Feb 25, 2016 at 23:54

Mulan

136k35 gold badges240 silver badges276 bronze badges

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

2 Comments

Jorel Amthor Over a year ago

Because i'm using the React formal librairie, it eases the further validations.

Mulan Over a year ago

Nevertheless, the courthouseData.map syntax should help you out

Damon · Accepted Answer · 2016-02-25 23:56:08Z

1

Use map to create jsx elements. Try:

var options = this.state.courthouseData.map(function(courthouse) {
   return (
     <option value={courthouse.i}>{courthouse.name}</option>
   );
});

I'm not sure where this function is being called but, chances are you want to return the output in your render function:

render: function() {
  return (
    <SomeParentElement>
      {options}
    </SomeParentElement>
  );
}

answered Feb 25, 2016 at 23:56

Damon

4,3562 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

function that returns a select with options, using React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related