CODEWITHSUNDEEP
html-tablereactjs
Katie
Katie

Reputation: 907

table rows and data won't show in JSX table in React document

I am trying to build a simple React app. I have a page with a table that I am currently trying to render with fake data. I can successfully navigate to and render the page, but when I do, only the header and none of my rows with data show up. Here is my code right now:

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;

I can console.log the students' name inside the map, but when the page loads, nothing but the header shows up. It's very possible I'm missing something very obvious; I'm new to this.

Upvotes: 0

Views: 410

Answers (1)

UXDart
UXDart

Reputation: 2620

change 

<tr key={idx} >

for

return <tr key={idx} >

Upvotes: 1

Related Questions