Sometimes, we want to fix the maxlength attribute not working issue with React.
In this article, we’ll look at how to fix the maxlength attribute not working issue with React.
How to fix the maxlength attribute not working issue with React?
To fix the maxlength attribute not working issue with React, we should make sure the input’s type
attribute is set to text
.
Also, we should set the maxLength
prop to set the maxlength attribute.
For instance, we write:
import React, { useState } from "react";
export default function App() {
const [message, setMessage] = useState();
const handleChangeInput = (e) => {
setMessage(e.target.value);
};
return (
<div>
<input
onChange={handleChangeInput}
value={message}
type="text"
name="phone"
maxLength="10"
/>
</div>
);
}
We add an input that with the maxlength
attribute set to 10 to make sure the input value has never more than length 10.
The maxLength
prop sets the value of the maxlength
attribute of the input.
Also, we set the type attribute of the input to text to make sure maxlength is enforced.
Then we set the onChange
and value
props to the event handler function and value respectively.
Now we should see that we can’t enter more than 10 characters into the input.
Conclusion
To fix the maxlength attribute not working issue with React, we should make sure the input’s type
attribute is set to text
.
Also, we should set the maxLength
prop to set the maxlength attribute.