Problems in switching to TypeScript in React application

Question

I need to switch my React app Components to Typescript.

I installed TS package and created a tsconfig.json file, react-app-env.d.ts files. And I also changed the extension from .js to .tsx. But in one of components I have an error. For example: in <div>

<div class="main-div">
    <div class="panel">
    <h2>Вхід</h2>
   </div>
</div>

Type '{ children: Element[]; class: string; }' is not assignable to type 'DetailedHTMLProps, HTMLDivElement>'. Property 'class' does not exist on type 'DetailedHTMLProps, HTMLDivElement>'.ts(2322)

Answer 1

The problem is that certain HTML attributes are also reserved words in Javascript, so to avoid problems, JSX syntax uses slightly different attributes from pure HTML.

The main two you're having trouble with are:

• class is now className
• for is now htmlFor

So your question would be:

<div className="main-div">
    <div className="panel">
    <h2>Вхід</h2>
   </div>
</div>

And the label you posted in a comment would be:

<label htmlFor="remember-me" className="remember">
    <span>Запам'ятати</span>
    <span><input id="remember-me" name="remember-me" type="checkbox"/></span> 
</label>