Mapping array of objects in React - unexpected token [duplicate]

Question

I have an array of objects like so:

{
_id: "59d2a245734d1d42e49ed55d",
pollName: "Favourite Colour",
createdBy: "John",
pollData: [
    {key: "blue", value: 5},
    {key: "green", value: 7},
    {key: "red", value: 4},
    {key: "orange",value: 1}
    ]
},
{
_id: "59d2a291734d1d42e49ed574",
pollName: "Favourite Ice Cream",
createdBy: "Peter",
pollData: [
    {key: "Chocolate", value: 12},
    {key: "Vanilla", value: 7},
    {key: "Strawberry", value: 10}
    ]
}

I am trying to map these into Pie Charts but get syntax errors. This is the code in React:

render() {
    const {polls} = this.state

    return(

        <h1>Home</h1>

        {polls.map((poll, index) => (
            <div key={poll._id}>
                <Chart poll={poll} />
            </div>
        ))}

    )
}

The error message I get is on the opening brace:

Unexpected token, expected ,

{polls.map((poll, index) => (

I have done this previously on another project and it worked fine mapping through an array of objects, then passing each object into a component. Why is it not working in this instance?

wrap all the ui elements into a wrapper div, like this: return(<div><h1>.......</div>), we can't return more than one elements. — Mayank Shukla
– Mayank Shukla, Commented Oct 3, 2017 at 10:57

Michal Cholewiński · Accepted Answer · 2017-10-03 11:03:36Z

0

There should be curly brackets istead of "( )"

    {polls.map((poll, index) => { 
     return <div key={poll._id}>
                <Chart poll={poll} />
            </div>  }

answered Oct 3, 2017 at 11:03

Michal Cholewiński

4642 silver badges14 bronze badges

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

2 Comments

Shubham Khatri Over a year ago

curly braces with return or () are equivalent syntaxes. Problem is what mayank mentioned in his comment

gmojo Over a year ago

I have tried it both ways with the same syntax error

Pramendra Gupta · Accepted Answer · 2017-10-03 11:11:57Z

0

const polls = [
  {
    _id: "59d2a245734d1d42e49ed55d",
    pollName: "Favourite Colour",
    createdBy: "John",
    pollData: [
      {key: "blue", value: 5},
      {key: "green", value: 7},
      {key: "red", value: 4},
      {key: "orange",value: 1}
    ]
  },
  {
    _id: "59d2a291734d1d42e49ed574",
    pollName: "Favourite Ice Cream",
    createdBy: "Peter",
    pollData: [
      {key: "Chocolate", value: 12},
      {key: "Vanilla", value: 7},
      {key: "Strawberry", value: 10}
    ]
  }
];


polls.map((poll, index) => {
  console.log(poll._id, poll.pollData)
});

answered Oct 3, 2017 at 11:11

Pramendra Gupta

14.9k4 gold badges35 silver badges35 bronze badges

Collectives™ on Stack Overflow

Mapping array of objects in React - unexpected token [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related