Getting "Unexpected token. Did you mean `{'>'}` or `>`?" upon using arrow-CodePudding

I'm new to React and Javascript. I got error message :"Unexpected token. Did you mean {'>'} or >?" with the "=>" in the below code. I'm using VSCode.

import React from "react";
import '../styles.css'
import TodoItem from "../component/todoItem";

class TodoList {
    constructor(props) {
        super(props);
        this.state =
        {
            itemList: {},
            total: 0
        }
    }

    render() {
        return (
            <ul id="todo-list" className="todo-app__list">
                this.state.itemList.map((item)=>(<TodoItem />));
            </ul>
        );
    }
}

TodoItem is a class component defined in another js file.

After searching online for a while, the best solution I could find was "uninstall prettier and re-install it again", which did not work with me. I also tried updating all npm packages but failed, too. Does anyone know how to solve this?

CodePudding user response：

you should use" {} " and write your code in the curly brackets for JSX so try the below code and let me know if is it working for you.

<ul id="todo-list" className="todo-app__list">
          {this.state.itemList.map((item)=>(<TodoItem />))}
      </ul>