CODEWITHSUNDEEP
javascriptreactjstypescript
Yura Morozov
Yura Morozov

Reputation: 431

Problems in switching to TypeScript in React application

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)

Upvotes: 5

Views: 6519

Answers (3)

аlex
аlex

Reputation: 5698

yo!

change class to className !

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

Upvotes: 0

dan
dan

Reputation: 1364

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>

Upvotes: 14

Murat Karag&#246;z
Murat Karag&#246;z

Reputation: 37604

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

Upvotes: 0

Related Questions