react.jsマップ内の予期しないトークンがあります

Question

class HelloWorld extends React.Component { 
    render() { 

    const arr = [{class:"A", students:[{name:'james'},{name:'john'}]}, 
{class:"B", students:[{name:'janice'},{name:'xena'}]}, 
{class:"C", students:[]}] 

    return (
     <div> 
     {arr.map(outer => 
    (outer.students.map(person => <p>{person.name}</p>)) 
)} 
     </div> 
    ); 
    } 
} 

上記の2つのマップを使用すると予想されるトークンはありますか？このようなUIを構築したい

Class A - james, john 
Class B - Janice, Xena 
Class C 

学生のオブジェクトが空の場合、チャレッジはクラスCを表示できません。あなたはこのようにそれを記述する必要が

const arr = [ 
    {class:"A", students:[{name:'james'},{name:'john'}]}, 
    {class:"B", students:[{name:'janice'},{name:'xena'}]}, 
    {class:"C", students:[]} 
] 

をもクラス名を印刷するには：JSONは有効なJSONではありません、あなたはクラスBのオブジェクトの後,を逃した

Answer 1

return (
    <div> 
     {arr.map(outer => 
      <div key={outer.class}> 
       {outer.class} - 
       {outer.students.map(person => <p key={person.name}>{person.name}</p>)} 
      </div> 
     } 
    </div> 
); 

ドン」 ユニークキーをmapの各要素に割り当てるのを忘れていました。