Problems in switching to TypeScript in React application

4
votes

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)

3
javascriptreactjstypescript
it should be className="main-div" not class – Thomas
It literally tells you what the problem is Property 'class' does not exist – Liam
But I have the same problem with label. <label for="remember-me" className="remember"> <span>Запам'ятати</span> <span><input id="remember-me" name="remember-me" type="checkbox"/></span> </label> – Yura Morozov
Use htmlFor instead for in JSX templates. – Timo

3 Answers

8
votes

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>
0
votes

You are missing a closing </div> and the property is not class, but className

0
votes

yo!

change class to className !

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