Syntax error: Unexpected token, expected "}" after render

Question

I'm copying this from a tutorial here . Whenever i try this snippet:

import React, { Component } from 'react';
const TableHeader = () => {
  return (
    <thead>
      <tr>
       <th>Name</th>
       <th>Job</th>
      </tr>
    </thead>
 )
}

const TableBody = props => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
       <td>{row.name}</td>
       <td>{row.job}</td>
      </tr>
   )
})

return <tbody>{rows}<tbody/>
}

class Table extends Component {
  render() {
    const { characterData } = this.props
    return (
    <table>
      <TableHeader />
      <TableBody characterData={characterData} />
    </table>
   );
 }
}
export default Table

It returns the error:

Syntax error: Unexpected token, expected "}" (28:12)

  26 | 
  27 | class Table extends Component {
> 28 |   render() {
     |            ^
  29 |     const { characterData } = this.props
  30 |     return (
  31 |       <table>

Can't understand what is the issue! Every other render block is working correct in other modules. The issue is just in this file.

Answer 1

return <tbody>{rows}</tbody>

Your closing tag had a typo. With this kind of error the problem is usually one or a few lines above where it is indicated.