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 ponents 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)
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 ponents I have an error. For example: in <div>
<div class="main-div">
<div class="panel">
<h2>Вхід</h2>
</div>
</div>
Share Improve this question edited Jan 9, 2019 at 15:09 Liam 29.7k28 gold badges138 silver badges200 bronze badges asked Jan 9, 2019 at 15:00 Yura MorozovYura Morozov 4311 gold badge5 silver badges7 bronze badges 4Type '{ children: Element[]; class: string; }' is not assignable to type 'DetailedHTMLProps, HTMLDivElement>'. Property 'class' does not exist on type 'DetailedHTMLProps, HTMLDivElement>'.ts(2322)
-
4
it should be
className="main-div"
notclass
– Thomas Commented Jan 9, 2019 at 15:04 -
2
It literally tells you what the problem is
Property 'class' does not exist
– 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 Commented Jan 9, 2019 at 15:10
-
1
Use
htmlFor
insteadfor
in JSX templates. – Timo Commented Jan 9, 2019 at 15:13
3 Answers
Reset to default 14The 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 nowclassName
for
is nowhtmlFor
So your question would be:
<div className="main-div">
<div className="panel">
<h2>Вхід</h2>
</div>
</div>
And the label you posted in a ment would be:
<label htmlFor="remember-me" className="remember">
<span>Запам'ятати</span>
<span><input id="remember-me" name="remember-me" type="checkbox"/></span>
</label>
You are missing a closing </div>
and the property is not class
, but className
yo!
change class
to className
!
<div className="main-div">
<div className="panel">
<h2>Вхід</h2>
</div>
</div>