using html attributes in JSX

Question

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.

Assuming you're using integers, try setting max="99999". MDN on <input />. — user499054
– user499054, Commented Apr 28, 2016 at 16:11

Davinel · Accepted Answer · 2016-04-28 16:06:30Z

3

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

answered Apr 28, 2016 at 16:06

Davinel

9704 gold badges10 silver badges22 bronze badges

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

1 Comment

ys27 Over a year ago

I see, I chose to use text because I wanted to restrict typing after 9chars. Thank you.

Community · Accepted Answer · 2017-05-23 11:59:35Z

1

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?

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Apr 28, 2016 at 16:08

Jeff Gnatek

111 silver badge1 bronze badge

1 Comment

ys27 Over a year ago

Thank you, this was also useful.

Collectives™ on Stack Overflow

using html attributes in JSX

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related