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)

It literally tells you what the problem is Property 'class' does not exist — Liam
– Liam, Commented Jan 9, 2019 at 15:06
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
– Yura Morozov, Commented Jan 9, 2019 at 15:10

dan · Accepted Answer · 2019-01-09 15:23:02Z

14

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>

answered Jan 9, 2019 at 15:23

dan

1,3749 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Murat Karagöz · Accepted Answer · 2019-01-09 15:01:54Z

0

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

answered Jan 9, 2019 at 15:01

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

1 Comment

Yura Morozov Over a year ago

Thank you. 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>

аlex · Accepted Answer · 2019-01-09 15:26:51Z

0

yo!

change class to className !

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

answered Jan 9, 2019 at 15:26

аlex

5,7161 gold badge31 silver badges40 bronze badges

Collectives™ on Stack Overflow

Problems in switching to TypeScript in React application

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related