Maxlength does not work React Js

Question

I have an input with React, but maxlength does not work. Does anyone know how to solve this?

This is handleChangeInput

 handleChangeInput(input) {     this.setState({         ...this.state,         form: {             ...this.state.form,             [input.target.name]: input.target.value         }     }) } 

And this is my input:

<div className="input-field col s12 m6 l6">     <input onChange={this.handleChangeInput} value={this.state.form.message} type="text" className="phone validate" name="phone" maxlength="11"/>     <label for="telefone">Telefone</label> </div> 

Answer 1

Property and attribute names are generally camelCase in React, maxLength works.

<input   onChange={this.handleChangeInput}   value={this.state.form.message}   type="text"   className="phone validate"   name="phone"   maxLength="11" /> 

However, you can still override this option if you give the input a value longer than maxLength. The only way around this is to check the length of the value in the callback, and truncate it.

Example

class App extends React.Component {   state = { form: { message: "" } };    handleChangeInput = event => {     const { value, maxLength } = event.target;     const message = value.slice(0, maxLength);      this.setState({       form: {         message       }     });   };    render() {     return (       <input         onChange={this.handleChangeInput}         value={this.state.form.message}         type="text"         className="phone validate"         name="phone"         maxLength="11"       />     );   } } 

Answer 2

for maxLength to work, type has to be 'text' (most people are probably putting number)