Maxlength property of input field is not respected

Issue

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?

Solution

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.

Answered By - TwoStraws