Iterate through array of objects shows syntax error reactjs

Question

I am rendering the unordered list elements based on array of objects. Here is my list array return inside this.state.

this.state = {
      cards: [{name: "card1", id: 1}, {name: "card2", id: 2}, {name: "card3", id: 3}]
    };

Using render() i will be listing the list elements.

render() {
    return ( <ul>
        this.state.cards.map((card) => { 
          return <li>{card.name}</li> 
        });
      </ul>
    )
  }

Uncaught Error: Module build failed: SyntaxError: Cards.js: Unexpected token (26:41). So the error is exactly at this point.

Interestingly your error snapshot shows that you are using -> sign for an arrow function while the code snippet is using correct => sign — RBT
– RBT, Commented Sep 30, 2017 at 9:19

Austin Greco · Accepted Answer · 2017-09-30 09:08:48Z

3

You just need to wrap your js code in curly braces

render() {
  return (
    <ul>
      {this.state.cards.map((card) => { 
        return <li>{card.name}</li>
      })}
    </ul>
  );
}

answered Sep 30, 2017 at 9:08

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

Comments

Marko Savic · Accepted Answer · 2017-09-30 10:40:53Z

1

Put curly braces when you want to use the value of a variable inside HTML.

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string.

In your case like this:

render() {
    return ( 
      <ul>
        {this.state.cards.map(card => <li>{card.name}</li>)}
      </ul>
    );
}

My approach:

render = () => {
   const { cards } = this.state; // Destructuring assignment  
   const cardsDraw = cards.map(x => <li key={x.id}>{x.name}</li>);
 return (
   <ul>
     {cardsDraw}
   </ul>
  );
};

edited Sep 30, 2017 at 10:40

answered Sep 30, 2017 at 9:20

Marko Savic

2,4492 gold badges17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Iterate through array of objects shows syntax error reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related