TypeScript error in E:/VSCODE/src/components/Header/index.tsx(13,17): '{' expected. TS1005

Dung Do Tien Oct 31 2022 2047

Hi guys!

I'm trying to use Template literals in ES6, In classname, I used `` and ${} to append a class name outside.

However, having a syntax problem like this:

E:/VSCODE/src/components/Header/index.tsx
TypeScript error in E:/VSCODE/src/components/Header/index.tsx (13,17):
'{' expected.  TS1005

    11 |   return (
    12 |     <div
  > 13 |       className=`flex items-center justify-center absolute inset-0 bg-blue-50 ${className}`
       |                 ^

My code is below: 

<div
  className=`flex items-center justify-center absolute inset-0 bg-blue-50 ${className}`
>
  {icon}
</div>

Please help me resolve it. Many thank!!

Have 1 answer(s) found.
  • T

    Tuan Do Ngoc Apr 06 2022

    This is an error syntax of JSX. If you want to add code javascript into JSX, you should add {} 

    You can fix it like this:

    <div className={`flex items-center justify-center absolute inset-0 bg-blue-50 ${className}`}>
       {icon}</div>

    It works for me, hope you can resolve it

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close