CODEWITHSUNDEEP
htmlreactjsjsx
ys27
ys27

Reputation: 99

using html attributes in JSX

I am trying to use the maxLength attribute in JSX, but the examples I've found are not working.

<div>
    <input type="Number" maxLength={5}/>
</div>

This is what I have currently, and I've tried:

maxLength="5"

maxLength={"5"}

Thank you.

Upvotes: 1

Views: 2626

Answers (2)

Jeff Gnatek
Jeff Gnatek

Reputation: 11

Do you need to use the type of "Number" ? maxLength will work with "text", however you would want to use max with number to define the max limit of the range of acceptable numbers. however, it won't prevent a user from entering more numbers then you specified, as answered here,

How can I limit possible inputs in a HTML5 "number" element?

Upvotes: 1

Davinel
Davinel

Reputation: 960

Problem is not with react or JSX at all. The problem is that input type "number" does not support maxlength property. It support property "max". For example:

<input type="Number" max="99"/>

Will allow numbers up to 99.

Also JSX does support maxLength property and you can write it like:

maxLength="5"
maxLength={"5"}
maxLength={5}

It will be the same thing

Upvotes: 3

Related Questions