Maxlength property of input field is not respected

- 1 answer

Ad

I have the following React method which should create an input field with a maximum length:

displayInputField: function(name, placeholder, updateMethod, maxLength) {
        return (
            <div className="form-group form-inline">
                <label>{name}</label>
                <input onChange={updateMethod} type="text" className="form-control"
                     maxlength={maxLength} placeholder={placeholder}/>

            </div>
        );
    },

However, the input field generated does not stop me from inputting more characters. Its source is this:

<input type="text" class="form-control" placeholder="<15 characters" data-reactid=".0.1.2.0.0.1.2.1.0.1">

Why is the maxlength attribute not respected?

Ad

Answer

Ad

Your problem here was that you had written maxlength when in JSX it should have been maxLength. This lower camel case approach is the same for all HTML attributes, e.g. cellPadding, encType, and so on.

Remember, your JSX ultimately is JavaScript; you should read the list of supported tags and attributes if you're not sure.

Ad
source: stackoverflow.com
Ad