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"]}}
javascript reactjs ecmascript-6
add a comment |
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"]}}
javascript reactjs ecmascript-6
{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}
is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do{this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}
– inostia
Nov 26 '18 at 0:22
but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}
– Deke
Nov 26 '18 at 0:26
What doestypeof this.state.lists
give you?
– inostia
Nov 26 '18 at 0:27
type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}
– Deke
Nov 26 '18 at 0:39
add a comment |
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"]}}
javascript reactjs ecmascript-6
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"]}}
javascript reactjs ecmascript-6
javascript reactjs ecmascript-6
edited Nov 26 '18 at 18:11
inostia
3,12611625
3,12611625
asked Nov 26 '18 at 0:16
DekeDeke
1,40311224
1,40311224
{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}
is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do{this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}
– inostia
Nov 26 '18 at 0:22
but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}
– Deke
Nov 26 '18 at 0:26
What doestypeof this.state.lists
give you?
– inostia
Nov 26 '18 at 0:27
type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}
– Deke
Nov 26 '18 at 0:39
add a comment |
{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}
is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do{this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}
– inostia
Nov 26 '18 at 0:22
but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}
– Deke
Nov 26 '18 at 0:26
What doestypeof this.state.lists
give you?
– inostia
Nov 26 '18 at 0:27
type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}
– Deke
Nov 26 '18 at 0:39
{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}
is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}
– inostia
Nov 26 '18 at 0:22
{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}
is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do {this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}
– inostia
Nov 26 '18 at 0:22
but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}
– Deke
Nov 26 '18 at 0:26
but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}
– Deke
Nov 26 '18 at 0:26
What does
typeof this.state.lists
give you?– inostia
Nov 26 '18 at 0:27
What does
typeof this.state.lists
give you?– inostia
Nov 26 '18 at 0:27
type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}
– Deke
Nov 26 '18 at 0:39
type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}
– Deke
Nov 26 '18 at 0:39
add a comment |
2 Answers
2
active
oldest
votes
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>
I wanted to output the result like this:{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
add a comment |
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
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473316%2funexpected-token-expected-while-looping-through-objects%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
I wanted to output the result like this:{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
add a comment |
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>
I wanted to output the result like this:{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
add a comment |
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>
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>
edited Nov 26 '18 at 1:54
answered Nov 26 '18 at 0:51
inostiainostia
3,12611625
3,12611625
I wanted to output the result like this:{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
add a comment |
I wanted to output the result like this:{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
I wanted to output the result like this:
{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
I wanted to output the result like this:
{Object.keys(this.state.lists).map((item, i) => <li key={i}>{this.state.lists[item].colors[0]}</li> )}
– Deke
Nov 26 '18 at 1:19
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
Oh... you just want the first color. Ok see my updated answer
– inostia
Nov 26 '18 at 1:22
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:
{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
I was turning the returned items to objects. so I decided to just loop over the array instead . finally went with this:
{this.state.lists.map(detail => {this.state.lists.map((det, i)=> <li>{detail.colors[i]}</li> )}
– Deke
Nov 26 '18 at 17:59
add a comment |
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
add a comment |
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
add a comment |
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
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
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>
// )
});
}
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>
// )
});
}
edited Nov 26 '18 at 4:35
answered Nov 26 '18 at 1:21
AnonymousSBAnonymousSB
2,229221
2,229221
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473316%2funexpected-token-expected-while-looping-through-objects%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
{{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}
is not a valid object in Javascript. Are you sure it's not supposed to be an array? If it is an array you can just do{this.state.lists.map(item => ({item.colors.map(color => (<li key={i}>{color}</li>)})}
– inostia
Nov 26 '18 at 0:22
but i'm able to map through till here: `{Object.keys(this.state.lists).map((item, i) => <li> {this.state.lists[item].colors} </li> )}
– Deke
Nov 26 '18 at 0:26
What does
typeof this.state.lists
give you?– inostia
Nov 26 '18 at 0:27
type of gives me object. Sorry. my object is in this format: {1: {id: 1, colors:["red", "blue"]}, 2: {id: 2, colors:["green", "yellow"]}}
– Deke
Nov 26 '18 at 0:39