I have seen many beginners hit a wall when their components simply refuse to render. Most of the time, the culprit is a small lowercase letter at the beginning of a function name.
If you are coming from a standard JavaScript background, using camelCase for functions feels natural.
However, in the world of JSX, that one small distinction between <myComponent /> and <MyComponent /> changes everything.
In this tutorial, I will show you exactly why React enforces this rule and how to fix common errors associated with component naming.
The Technical Reason Behind Capitalization
When you write JSX, it isn’t actually HTML; it is a syntactic sugar for React.createElement().
React uses the capitalization of the tag name to determine whether it should treat the element as a built-in HTML tag or a custom component.
How React Distinguishes Elements
If you use a lowercase name like <div> or <span>, React treats it as a string and looks for a standard HTML element.
If you use an uppercase name like <Header />, React treats it as a reference to a JavaScript variable (your function or class).
Method 1: Naming Functional Components Correctly
When I build applications for US-based financial services, I have to ensure the code is readable and follows strict conventions.
The most common way to define a component is through a function. Here is how to do it right.
Incorrect Example:
import React from 'react';
// This will fail to render as a component
function accountBalance() {
return (
<div>
<h3>Current Balance: $4,500.00</h3>
<p>Bank of America - Checking Account</p>
</div>
);
}
export default accountBalance;The Correct Way:
In this version, I capitalize the function name. This tells the transpiler that AccountBalance is a custom component.
import React from 'react';
// Notice the capital 'A'
function AccountBalance() {
const accountInfo = {
bank: "Chase Bank",
balance: "12,250.50",
location: "New York, NY"
};
return (
<div style={{ padding: '20px', border: '1px solid #ccc' }}>
<h2>{accountInfo.bank} Statement</h2>
<p><strong>Location:</strong> {accountInfo.location}</p>
<h3 style={{ color: 'green' }}>Total Balance: ${accountInfo.balance}</h3>
</div>
);
}
export default AccountBalance;You can see the output in the screenshot below.
Method 2: Handle Capitalization in Class Components
Even though Hooks are the modern standard, many enterprise systems in the USA still rely on Class components.
I often see developers name their files correctly, but forget to update the class name inside the code.
import React, { Component } from 'react';
class TaxCalculator extends Component {
render() {
const federalTax = 0.24; // Sample US Federal Tax Rate
const income = 95000;
return (
<div className="tax-container">
<h1>IRS Tax Summary 2024</h1>
<p>Annual Income: ${income.toLocaleString()}</p>
<p>Estimated Federal Tax: ${(income * federalTax).toLocaleString()}</p>
</div>
);
}
}
export default TaxCalculator;You can see the output in the screenshot below.
The rule remains the same: the class name must be capitalized.
Method 3: Dynamically Selecting Components
Sometimes, I need to decide which component to render at runtime based on user data.
I encountered this recently while building a shipping dashboard for a logistics company in Texas.
The Implementation:
import React from 'react';
const FedexCarrier = () => <div>Shipping via FedEx (Memphis, TN Hub)</div>;
const UpsCarrier = () => <div>Shipping via UPS (Louisville, KY Hub)</div>;
const ShippingDetails = ({ carrierType }) => {
const components = {
fedex: FedexCarrier,
ups: UpsCarrier
};
// Assigning to a capitalized variable is mandatory here
const SelectedCarrier = components[carrierType];
return (
<div>
<h1>Logistics Dashboard</h1>
<SelectedCarrier />
</div>
);
};
export default ShippingDetails;You can see the output in the screenshot below.
If you store a component in a variable, that variable must also be capitalized before you use it in JSX.
Why Does React Not Auto-Fix This?
You might wonder why the React team doesn’t just allow lowercase names.
The primary reason is to avoid conflicts with future HTML specifications.
If HTML introduces a new tag called <navbar>, and you have a component named navbar, the browser wouldn’t know which one to prioritize.
By reserving all lowercase tags for the DOM and all uppercase tags for React, the ecosystem remains stable and predictable.
Common Errors and How to Spot Them
When you use a lowercase name for a React component, you won’t always get a loud error in the console.
Often, the component just “disappears” or renders as an empty custom HTML tag like <mycomponent></mycomponent>.
If you see your custom tag in the browser’s Inspect Element tool instead of the actual HTML content, you likely forgot the capital letter.
Best Practices for Component Naming
During my time leading and architecting React projects, I’ve found that following these rules prevents 90% of rendering bugs:
- PascalCase for Files: Always name your files UserProfile.js instead of userProfile.js.
- Match Names: Ensure the function name inside the file matches the filename exactly.
- Avoid Reserved Names: Never name a component something like Link or Switch if you are using libraries like React Router, unless you intend to wrap them.
Real-World Example: A USA Real Estate Listing
Let’s look at a complete example that uses multiple components to display a property listing in Los Angeles.
import React from 'react';
// Child Component - Capitalized
const PropertyHeader = ({ price, address }) => (
<header>
<h1 style={{ color: '#2c3e50' }}>{price}</h1>
<p>{address}</p>
</header>
);
// Child Component - Capitalized
const FeatureBadge = ({ label }) => (
<span style={{ background: '#f1f1f1', padding: '5px 10px', margin: '5px' }}>
{label}
</span>
);
// Main Component - Capitalized
function RealEstateListing() {
const propertyData = {
price: "$1,250,000",
address: "123 Sunset Blvd, Los Angeles, CA",
features: ["3 Bedrooms", "2 Bathrooms", "Pool", "Mountain View"]
};
return (
<div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px' }}>
<PropertyHeader
price={propertyData.price}
address={propertyData.address}
/>
<div style={{ marginTop: '20px' }}>
{propertyData.features.map(feature => (
<FeatureBadge key={feature} label={feature} />
))}
</div>
</div>
);
}
export default RealEstateListing;In the example above, if I had named FeatureBadge as featureBadge, the list of amenities would simply fail to show up on the page.
Understanding the distinction between HTML tags and React components is a fundamental step in mastering the library.
It might feel like a strict rule at first, but it provides a clear structure that makes your code much easier to debug and maintain.
I hope you found this tutorial helpful!
If you are just starting your journey with React, keeping your component names capitalized will save you hours of troubleshooting.
It is a small detail that makes a massive difference in how the React engine interprets your UI.
You may read:
- React Render Component from Variable
- React Container Component Pattern
- Web Components vs React
- How to Return Values from React Components
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
