when I use "=>" Why am I getting "Unexpected token. Did you mean `{'>'}` or `>`?ts" in React Component Class-

Viewed 125

I have read some similar Q&A, yet couldn't figure it out. I am a beginner. When I use => in the React Component Class it is not recognized. So I get the "employee" is not defined.

Here is the ListEmployeeComponent:

class ListEmployeeComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      employees: [],
    };
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Employees List</h2>

        <div className="row">
          <table className="table table-striped taable-bordered">
            <thead>
              <tr>
                <th>Employee First Name</th>
                <th>Employee Last Name</th>
                <th>Employee Email ID</th>
                <th>Actions</th>
              </tr>
            </thead>

            <tbody>
              this.state.employees.map((employee) => (
                <tr key={employee.id}>
                  <td>{employee.firstname}</td>
                  <td>{employee.lastname}</td>
                  <td>{employee.emailId}</td>
                </tr>
              ))
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
export default ListEmployeeComponent;

Here is a screenshot with the error. Please help me fix this or suggest me anything so I can understand it better.

screenshot

Thank you for your time.

1 Answers

You are missing curly braces around JS statement in jsx:

...
{this.state.employees.map((employee) => (
  <tr key={employee.id}>
    <td>{employee.firstname}</td>
    <td>{employee.lastname}</td>
    <td>{employee.emailId}</td>
  </tr>
))}
...
Related