Display a table in React using different components

Question

I'm just starting to learn React and what I'm trying to do is to display a table. I'm doing it using 3 components: App.js, DisplayTable.js, and TableRows.js. The reason I'm doing it this way is that later on, I will need certain rows of the table to be displayed subject to different conditions. I don't get any error messages, but the table is not being displayed. This is my code:

App.js:

import Form from './components/Form'

import { useState } from 'react'
import TableDisplay from './components/TableDisplay'

const App = () => {


    const [rows, setRows] = useState([
        {
            id:1,
            description:'',
            semester:'',
            prefix:'ENG',
            number:'368/371',
            grade:'',
            editing:''
        },
        {
            id:2,
            description:'',
            semester:'',
            prefix:'',
            number:'',
            grade:'',
            editing:''
        },
        {
            id:3,
            description:'',
            semester:'',
            prefix:'',
            number:'',
            grade:'',
            editing:''
        },
    ])



  return (
    <div className="container">
      
        <Form/>
        
      <TableDisplay rows={rows}/>
    </div>
   

  );

}
export default App;

TableDisplay.js:

import TableRows from "./TableRows"

const TableDisplay = ({rows}) => {
  return (
    <>
    
    {rows.map((row) => {
        <TableRows key={row.id} row={row}/>
    })}
    
    </>
  )
}

export default TableDisplay

TableRows.js:

import React from 'react'

const TableRows = ({row}) => {
  return (
    <div className="container">
        <table className="table table-striped">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Description</th>
                    <th scope="col">Semester</th>
                    <th scope="col">Prefix</th>
                    <th scope="col">Number</th>
                    <th scope="col">Grade</th>
                    <th scope="col">Editing</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">{row.id}</th>
                    <td>{row.description}</td>
                    <td>{row.semester}</td>
                    <td>ENG</td>
                    <td>368/371</td>
                    <td>{row.grade}</td>
                    <td><button type="button" className="btn btn-warning">Edit</button></td>
                </tr>
                <tr>
                <th scope="row">{row.id}</th>
                    <td>{row.description}</td>
                    <td>{row.semester}</td>
                    <td>ENG</td>
                    <td>368/371</td>
                    <td>{row.grade}</td>
                    <td><button type="button" className="btn btn-warning">Edit</button></td>
                </tr>
                <tr>
                <th scope="row">{row.id}</th>
                    <td>{row.description}</td>
                    <td>{row.semester}</td>
                    <td>ENG</td>
                    <td>368/371</td>
                    <td>{row.grade}</td>
                    <td><button type="button" className="btn btn-warning">Edit</button></td>
                </tr>
                
            </tbody>
        </table>
    </div>
  )
}

export default TableRows

Answer 1

You should remove bracket

const TableDisplay = ({ rows }) => {
  return (
    <>
      {rows.map((row) => <TableRows key={row.id} row={row} />)}
    </>
  );
};

or add return

const TableDisplay = ({ rows }) => {
  return (
    <>
      {rows.map((row) => {
        return <TableRows key={row.id} row={row} />;
      })}
    </>
  );
};