React not displaying data in table row - reactjs

Question

I am a beginner to React and frontend development in general.
Here is a "simple" code to display a table.
function TableHeader() {
return (
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
);
}
function TableDataRow(row, index) {
return (
<tr key={index}>
<td>{row.name}</td>
<td>{row.job}</td>
</tr>
)
}
function TableBody(props) {
const characterData = props.characterData;
return (
<tbody>
{characterData.map((row, index) => <TableDataRow row={row} index={index}/>)}
</tbody>
);
}
class Table extends Component {
render() {
const { characterData } = this.props;
return (
<table>
<TableHeader />
<TableBody characterData={characterData} />
</table>
);
}
}
class App extends Component {
render() {
const characters = [
{
'name': 'Charlie',
'job': 'Janitor'
},
{
'name': 'Mac',
'job': 'Bouncer'
},
{
'name': 'Dee',
'job': 'Aspring actress'
},
{
'name': 'Dennis',
'job': 'Bartender'
}
];
return (
<div className="container">
<Table characterData={characters} />
</div>
);
}
}
The error is as follows:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of TableBody. See
https://banned-fb.example.com/react-warning-keys for more information.
in TableDataRow (at Table.js:30)
in TableBody (at Table.js:44)
in table (at Table.js:42)
in Table (at App.js:28)
in div (at App.js:27)
in App (at src/index.js:6)
The data rows are empty in the table. I think there is an issue in the call to TableDataRow. What is that I am possibly doing wrong?
Screenshot:

Answer 1

Key thing is just a warning, but you should fix it too, the reason nothing is rendering because you have your component like this:
function TableDataRow(row, index) {...} // WRONG
Function Component get just one argument that is props, what you need to do is either:
function TableDataRow(props) {
const {row, index} = props; // get row and index out of props inside function
...
}
OR
function TableDataRow({ row, index }) {...} // destructure the props in parameter
Now About fixing the key warning:
Instead of providing key to the <tr> inside TableDataRow you need to provide key to TableDataRow, like this:
function TableDataRow({ row }) { // you have a little error here too, row should be inside curly braces or use props and get row from props inside the function
return (
<tr> // no need of key
<td>{row.name}</td>
<td>{row.job}</td>
</tr>
)
}
function TableBody(props) {
const characterData = props.characterData;
return (
<tbody>
{characterData.map((row, index) => <TableDataRow row={row} key={index}/>)} // key should be here
</tbody>
);
}
Also you should use index as key as last resort (see docs for why). If your data comes from api every item might have an id you can use that as key, or there is maybe something else unique for each character, if not, it's ok to use index.

Answer 2

import React from 'react';
function TableHeader() {
return (
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
);
}
function TableBody(props) {
const characterData = props.characterData;
return (<tbody>
{characterData.map((row, index) =>
<tr key={index}>
<td>{row.name}</td>
<td>{row.job}</td>
</tr>)}
</tbody>
);
}
class Table extends React.Component {
render() {
const { characterData } = this.props;
return (
<table>
<TableHeader />
<TableBody characterData={characterData} />
</table>
);
}
}
class Hello extends React.Component {
render() {
const characters = [
{
'name': 'Charlie',
'job': 'Janitor'
},
{
'name': 'Mac',
'job': 'Bouncer'
},
{
'name': 'Dee',
'job': 'Aspring actress'
},
{
'name': 'Dennis',
'job': 'Bartender'
}
];
return (
<div className="container">
<Table characterData={characters} />
</div>
);
}
}
export default Hello;
Find your working solution here..
Stackblitz Link