React / Javascript map function - return array

Question

I have a list of accounts with a load of properties on each account. I need to send a cut down version, with an array of only two fields, to a method. I have to pass a property called options to my SelectInput component, which has a list of ids and values, which land up rendereing a drop down.

<SelectInput 
    options={
       this.value.allAccountsList
          .map((item, index) => {
                          new { 
                            id: item.Id,
                            value: item.name
                          }
                      })  
                    }/>

But am getting:

Expected an assignment or function call and instead saw an expression

Is map the right thing to use here, and if so, what am I doing wrong?

map is correct to use in this requirement, only problem is remove new with return var newData = this.value.allAccountsList.map((item, index) => { return {id: item.Id, value: item.name} }) — Puneet Bhandari
– Puneet Bhandari, Commented Aug 5, 2019 at 5:07

T.J. Crowder · Accepted Answer · 2019-08-05 05:03:59Z

3

map is the right thing, yes. The problem is the new keyword. You don't use new when creating an object with an object literal. Another problem is that your arrow function has no return value. Fixing both, just change new to return:

<SelectInput 
    options={
        this.value.allAccountsList
        .map((item, index) => {
            return { 
                id: item.Id,
                value: item.name
            };
        })  
    }
/>

You can also use the concise form of arrow function, by using () around the object literal. If we also remove the index parameter (since it isn't used):

<SelectInput 
    options={
        this.value.allAccountsList.map(i => ({id: i.Id, value: i.name}))
    }
/>

answered Aug 5, 2019 at 5:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Ponpon32 · Accepted Answer · 2019-08-05 05:04:16Z

0

You don't need to use new inside the map callback.

Try this:

<SelectInput 
    options={
       this.value.allAccountsList
          .map((item, index) => ({
                            id: item.Id,
                            value: item.name
                      }))  
                    }/>

answered Aug 5, 2019 at 5:04

Ponpon32

2,2102 gold badges16 silver badges26 bronze badges

Comments

ravibagul91 · Accepted Answer · 2019-08-05 05:04:50Z

0

Instead of this,

new { 
   id: item.Id,
   value: item.name
}

do this,

return { 
 id: item.Id,
 value: item.name
}

answered Aug 5, 2019 at 5:04

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Comments

Anil Namde · Accepted Answer · 2019-08-05 05:26:07Z

0

Replace new with return that should take care of it. So map callback should return value with new you are not returning the value which is causing the error message

One more suggestion instead of inline code in component to transform data try extracting it out and using it that really helps simplify code to read and maintain

<SelectInput 
    options={
       this.value.allAccountsList
          .map((item, index) => {
                          return { 
                            id: item.Id,
                            value: item.name
                          }
                      })  
                    }/>

answered Aug 5, 2019 at 5:26

Anil Namde

6,64812 gold badges68 silver badges101 bronze badges

Collectives™ on Stack Overflow

React / Javascript map function - return array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related