CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Deke
Deke

Reputation: 4649

Unexpected token, expected "," while looping through objects

I'm trying to map through collection of objects inside an object and access the color item, but i get an error Unexpected token, expected ",". This is how i'm trying to map through. Is this the right way to map objects to retrieve value from colors. 

  {Object.keys(this.state.lists).map((item, i) => 
    (this.state.lists[item].colors).map(item, i) =>
      <li  key={i}>{this.state.lists[item].colors[item]} </li>
  )}

this.state.lists looks like this:

 {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}

Upvotes: 1

Views: 1206

Answers (2)

AnonymousSB
AnonymousSB

Reputation: 3604

When using ES6 functions, you can omit the () of the parameters, only if you use 1 parameter. What you've done is actually closed your map before you even got to the fat arrow (=>). Your error is saying it doesn't understand the , in map(item, i), since map doesn't accept a second parameter. Here's a bit of a break-down, followed by some optimized code for your problem.

A basic ES6 function is () => {}, where the parameters go between the () braces, and the code goes between the {}.

Here's a basic sum function: (a, b) => { return a+b }. Since this only has one line, and it's the return value, you can omit the {} brackets. i.e., (a, b) => a+b

Here's a hello function: (name) => { return 'hello ' + name }. Since it only has 1 parameter, you can use name => { return 'hello ' + name }. Or even using the above rule: name => 'hello ' + name.

These shortcuts can make code easier to write, but perhaps more difficult to understand. If in doubt, just always keep the () braces to avoid confusion.

const obj = {
  1: {id: 1, colors:["red", "blue"]},
  2: {id: 2, colors:["green", "yellow"]}
}

for (key in obj) {
  const item = obj[key];
  item.colors.map((color, i) => {
    console.log( `<li key=${item.id}-${i}>${color}</li>`)
    // Below lines are commented out because StackOverflow
    // does not process JSX tags. Just uncomment and remove
    // the console.log above

    // return (
    //   <li key={item.id}-${i}>{color}</li>
    // )
  });
}

NOTES: Instead of using Object.keys to get an array of keys, I just use a for...in loop to accomplish the same thing.

Documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Upvotes: 1

inostia
inostia

Reputation: 8023

You are not passing a callback function to your second map call, .map(item, i). Hence the syntax error. It should instead be something like .map((item, i) => ...).

Here's some cleaned up code that might make sense of this, though I haven't tested if it works with React:

const colors = Object.keys(this.state.lists).map(itemKey => {
    return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
})

And when you render,

<ul>{colors}</ul>

Upvotes: 1

Related Questions