オブジェクトの配列を反復すると、構文エラーが表示されます。reactjs

Question

オブジェクトの配列に基づいて順序付けられていないリスト要素をレンダリングしています。ここに私のリスト配列はthis.stateの中に戻ります。

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

render()を使用すると、リストの要素がリストされます。

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)。したがって、エラーはこの時点で正確です。あなたはHTML内の変数の値を使いたいときは、ちょうど中括弧で

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

Answer 1

は中括弧を入れてください。

中括弧はJSXパーサが、それはJavaScriptとして代わりの文字列それらの間で内容を解釈する必要があることを知らせるための特別な構文です。

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

私のアプローチ：このようなあなたの場合

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

Answer 2

をあなたのJSコードをラップする必要が