テーブルの行とデータは、ReactドキュメントのJSXテーブルに表示されません

Question

私は簡単なReactアプリケーションを構築しようとしています。私は現在、偽のデータでレンダリングしようとしているテーブルを持つページを持っています。私は正常にページに移動してレンダリングすることができますが、そうすると、ヘッダーとデータのある行は表示されません。ここに私のコードがあります：

import React from 'react'; 

const Campus = (props) => { 

    const campus = { 
     name: 'Terra', 
     students: ['katie', 'lara'], 
     instructors: ['joe', 'bob'] 
    } 

    return (
    <table className='table'> 
     <thead> 
     <tr> 
      <th>Students</th> 
     </tr> 
     </thead> 
     <tbody> 
     { console.log("students ", campus.students) } 
     { campus.students && campus.students.map((student, idx) => { 
      <tr key={idx} > 
       <td> 
       {console.log('student is ', student)} 
       {student} 
       </td> 
      </tr> 
     }) 
     } 
     </tbody> 
    </table> 
); 
} 

export default Campus; 

私はconsole.logに学生の名前をマップ内に入れることができますが、ページが読み込まれると、ヘッダだけが表示されます。非常に明白な何かが欠けている可能性が非常に高いです。私はこれに新しいです。

Answer 1

変更

<tr key={idx} > 

ため

return <tr key={idx} >