An HTML-like JSX element is an element with a lower case tag name. In JSX, lower case tag names will be treated as HTML tags, while upper case tag names will be treated as a component instance.
For instance, lower case <button> is treated as an HTML element, while upper case <Button> would be treated as a component instance of the Button class.
As a consequence of this, React components must always start with a capital letter, or will otherwise be treated as an HTML element.
// making all uppercase
//removing spaces and making all lowercase
city = city.trim().toLowerCase();
//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);