Handling Reserved Keywords as Component Names in React

When working with React components, you need to be careful not to use JavaScript reserved keywords as component names. Here’s how to properly handle this situation:

Why It’s a Problem

JavaScript has reserved keywords that can’t be used as identifiers (like class, function, switch). Using these as component names will cause syntax errors:

function class() {  // ❌ SyntaxError
  return <div>My Class</div>;
}

const switch = () => {  // ❌ SyntaxError
  return <div>Toggle</div>;
}

Solutions

1. Use PascalCase Naming Convention (Recommended)

React components conventionally use PascalCase, which naturally avoids most keyword conflicts:

function ClassComponent() {  // ✅ Works
  return <div>My Class</div>;
}

const SwitchComponent = () => {  // ✅ Works
  return <div>Toggle</div>;
}

2. Add Descriptive Suffixes

const ClassView = () => <div>Class Content</div>;  // ✅
const SwitchControl = () => <div>Switch</div>;     // ✅

3. Use Synonyms or Related Terms

function Course() { return <div>Class Content</div>; }  // Instead of 'class'
function Toggle() { return <div>Switch</div>; }         // Instead of 'switch'

Common Problem Keywords and Alternatives

Reserved Keyword	Safe Alternatives
class	ClassComponent, Course
function	FunctionComponent
switch	Switch, Toggle
delete	DeleteButton, Remove
enum	Enumeration
export	Exporter, ExportView
import	Importer, ImportForm
new	NewItem, Create

Special Case: HTML Attributes

For props that conflict with HTML attributes (like class), React provides alternatives:

// ❌ Wrong
<div class="header">  // 'class' is reserved

// ✅ Correct
<div className="header">

TypeScript Considerations

TypeScript will catch these issues during compilation. The solutions are the same:

// ❌ Error
interface Props {
  delete: () => void;  // Reserved keyword
}

// ✅ Fixed
interface Props {
  onDelete: () => void;
}

Best Practices

1. Always use PascalCase for component names
2. Avoid abbreviations unless universally understood
3. Make names descriptive of the component’s purpose
4. Add suffixes like “Component”, “View”, or “Container” when needed
5. Remember that component names must start with capital letters in JSX

Example Refactoring

Before (Error):

function new() {  // ❌
  return <div>Create Item</div>;
}

After (Fixed):

function NewItem() {  // ✅
  return <div>Create Item</div>;
}

By following these conventions, you’ll avoid syntax errors while keeping your code clean and maintainable.