Looping inside an array object

Question

I'm using react-select and want to loop through an object to represent it as the select's value and label:

// Inside the component's render:

var myVar = [
  this.props.foo.forEach(function(a){
    {value: a.name, label: a.name} // line 83
  })
];

//return

<Select ref="stateSelect" options={myVar} simpleValue clearable={this.state.clearable}
  name=""
  value={this.state.bar} onChange={this._myFunc} 
/>

this._myFunc is not relevant for this question. I want to get something like this:

var myVar = [
  {value: "hello", label: "world"},
  // the list goes on
];

With the above code, I got:

Parse Error: Line 83: Unexpected token :

I'm not that strong with JavaScript to figure out this solution but is this possible? Links to read up on?

{ ... } is considered as block here. Probably you need someObj = {value: a.name, label: a.name} — Tushar
– Tushar, Commented Jul 7, 2016 at 13:43

gurvinder372 · Accepted Answer · 2016-07-07 13:45:38Z

2

If you intend to initialize myVar with an array of objects from this.props.foo then try

var myVar = this.props.foo.map(function(a){
    return {value: a.name, label: a.name} ;
});

answered Jul 7, 2016 at 13:45

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

5 Comments

Sylar Over a year ago

Failed propType: Invalid prop option of type array supplied to Option, expected object. Check the render method of Select.

gurvinder372 Over a year ago

@Sylar are you still getting Parse Error: Line 83: Unexpected token : ? what were you expecting to get as an output from this statement?

Sylar Over a year ago

Getting error as in my first comment. In my question where the list goes on that's what works but I need the value and label from an array.

gurvinder372 Over a year ago

@Sylar can you share a fiddle?

Sylar Over a year ago

SORRY! I was wrapping your answer inside: var myVar = [ //your answer] It works. Thanks

Jules Goullee · Accepted Answer · 2016-07-07 13:54:32Z

1

The best is loop in render fct like this:

render (){
 return (
  <div>
   <Select
     ref="stateSelect"
     options={
      this.props.foo.map( (a) => {name: a.name, label: a.name} )
     }
     simpleValue
     clearable={this.state.clearable}
     name=""
     value={this.state.bar}
     onChange={this._myFunc} 
   />
  </div>);
}

answered Jul 7, 2016 at 13:54

Jules Goullee

5914 silver badges12 bronze badges

2 Comments

Sylar Over a year ago

Is this es6? "Fat arrow"? Maybe useful in other projects.

Jules Goullee Over a year ago

Yes es6 with jsx. You can use in es5 map( function(a) { return {name: a.name, label: a.name} })

Collectives™ on Stack Overflow

Looping inside an array object

2 Answers 2

5 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Related