Setting maxLength of input field in react

Question

I have multiple fields on different pages all controlled from a single page and using material ui textfield. I have to set different maxLength for different fields.

I found inputProps={{maxLength: 10}} , but this allows only 1 fixed value, I need a way to set different values depending on requirement.

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Dec 20, 2021 at 9:11

Diogo M.F. · Accepted Answer · 2021-12-14 13:03:33Z

1

Make your maxLength a state, so you can conditionally set it:

const [dynamicLength, setDynamicLength] = useState(10);

<TextField 
    inputProps={{
       maxLength: dynamicLength
    }}
/>

Check code on sandbox: https://codesandbox.io/s/textfield-h95ti

answered Dec 14, 2021 at 13:03

Diogo M.F.

112 bronze badges

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

2 Comments

Michael Over a year ago

not sure it needs a state. A variable might be enough...

CuriousTS Over a year ago

Yes, a variable is enough and worked for me. Thanks for the contribution @Diogo M.F.

Collectives™ on Stack Overflow

Setting maxLength of input field in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related