ブロック内のステートメントを囲む矢印の中にHTMLを返すときの矢印の本体のエラー

Question

この質問は以前に聞いたことがあるが、私の現在の状況ではリンターが望む構文を理解できない。

私はブロック文の括弧を削除する必要がありますが、それが動作しても糸くずを渡すために取得するためにリファクタリングする方法を見つけ出すことはできません理解：

return (
    <div> 
    { 
     paymentSchedule.map((payment) => { 
     return (
      <div>{payment.description}</div> 
     ); 
     }) 
    } 
    </div> 
); 

これは、次の糸くずのエラーを生成します。

Unexpected block statement surrounding arrow body

Answer 1

使用この：

return (
    <div> 
     { 
     paymentSchedule.map(payment => <div key={payment.description}>{payment.description}</div>) 
     } 
    </div> 
); 

理由：ここでblockステートメントは不要です。ちょうど上記の方法で直接divに戻りたいからです。

提案：各要素に一意のキーを割り当てます。それ以外の場合は警告もスローされます。