Component naming rules in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Valid React component names

Which of the following component names is valid in React?

A MyComponent

B myComponent

C 123Component

D _myComponent

💡 Hint

React components must start with a capital letter and follow JavaScript identifier rules.

React components must start with an uppercase letter. 'MyComponent' is valid. 'myComponent' starts with lowercase, '123Component' starts with a digit, and '_myComponent' starts with an underscore which is allowed in JS but not recommended for React components.

❓ component_behavior

intermediate

Component usage with lowercase vs uppercase names

What will React render when using a component named mybutton in JSX?

Consider these two components:

function mybutton() { return <button>Click</button>; }
function MyButton() { return <button>Click</button>; }

And usage:

<mybutton />

A Renders the custom component output (button with text 'Click')

B Throws a syntax error because component names must be uppercase

C Renders an HTML element named 'mybutton' (unknown tag) instead of the component

D Renders nothing because lowercase components are ignored

💡 Hint

React treats lowercase tags as HTML elements, not components.

React treats lowercase JSX tags as HTML elements. Since 'mybutton' is lowercase, React tries to render an HTML element <mybutton>, which is invalid HTML but React allows it. To render a component, the name must start with uppercase.

🔧 Debug

advanced

Why does this component fail to render?

Given this React component code, why does it fail to render anything?

function 2ndComponent() {
  return <div>Hello</div>;
}

A The component returns invalid JSX syntax

B Component names cannot start with a digit, causing a syntax error

C React components must be arrow functions, not function declarations

D The component is missing a return statement

💡 Hint

Check JavaScript rules for function names.

JavaScript function names cannot start with digits. '2ndComponent' is invalid syntax, so React cannot compile this component.

🧠 Conceptual

advanced

Why use PascalCase for React components?

Why is it recommended to name React components using PascalCase (e.g., MyComponent)?

A Because React treats PascalCase names as components and lowercase as HTML tags

B Because JavaScript only allows PascalCase function names

C Because PascalCase components load faster in the browser

D Because CSS styles only apply to PascalCase components

💡 Hint

Think about how React distinguishes components from HTML elements.

React uses the first letter case to distinguish components from HTML tags. PascalCase signals React to treat the name as a component, while lowercase is treated as an HTML element.

❓ state_output

expert

Component name and state hook behavior

Consider this React component:

function mycounter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

What will happen when you use <mycounter /> in your app?

A React throws an error because hooks cannot be used in lowercase named components

B The button renders and increments count on click as expected

C The button renders but clicking does not update the count state

D React treats <mycounter /> as an HTML element and ignores the hook, so no state updates

💡 Hint

Recall how React treats lowercase JSX tags and hooks usage.

React treats lowercase JSX tags as HTML elements, not components. Hooks like useState only work inside React components. Since 'mycounter' is lowercase, React renders an HTML element <mycounter> ignoring the function and hooks, so no state updates happen.

Practice

1. Which of the following is the correct way to name a React component?

easy

A. MyComponent

B. myComponent

C. my_component

D. mycomponent

Solution

1. Step 1: Understand React component naming rules

   React components must start with a capital letter to be recognized as components.

2. Step 2: Identify the correct naming style

   PascalCase (capitalizing each word) is the standard for React components, so "MyComponent" is correct.

3. Final Answer:

   MyComponent -> Option A

4. Quick Check:

   Component names start with capital letters = C [OK]

Hint: Component names always start with uppercase letters [OK]

Common Mistakes:

• Starting component names with lowercase letters
• Using underscores instead of PascalCase
• Using all lowercase letters

2. Which of the following will NOT be recognized by React as a component?

easy

A. function mycomponent() { return Hello; }

B. const MyComponent = function() { return Hello; };

C. const MyComponent = () => Hello;

D. function MyComponent() { return Hello; }

Solution

1. Step 1: Check function component naming

   React treats functions starting with lowercase letters as regular functions, not components.

2. Step 2: Identify the naming error

   While lowercase function names are valid JavaScript, React will not render them as components, causing unexpected behavior.

3. Final Answer:

   function mycomponent() { return <div>Hello</div>; } -> Option A

4. Quick Check:

   Component functions must start uppercase = D [OK]

Hint: Component functions must start with uppercase letters [OK]

Common Mistakes:

• Using lowercase function names for components
• Confusing JavaScript function syntax with React rules
• Assuming lowercase names work as components

3. What will happen if you try to render this component?

function greeting() { return <h1>Hi</h1>; }

<greeting />

medium

A. It renders the component but with a warning

B. It throws a syntax error

C. It renders the <h1>Hi</h1> text on the page

D. It renders nothing because React treats it as a lowercase HTML tag

Solution

1. Step 1: Understand lowercase component names in JSX

   React treats lowercase tags as HTML elements, not components.

2. Step 2: Analyze the effect of rendering <greeting />

   Since "greeting" is lowercase, React looks for an HTML tag <greeting>, which does not exist, so it renders nothing.

3. Final Answer:

   It renders nothing because React treats it as a lowercase HTML tag -> Option D

4. Quick Check:

   Lowercase names render as HTML tags = A [OK]

Hint: Lowercase names render as HTML tags, not components [OK]

Common Mistakes:

• Expecting lowercase names to render components
• Thinking React throws syntax errors for lowercase names
• Assuming React warns automatically for lowercase components

4. Identify the error in this React component code:

function 1stComponent() { return <div>Hello</div>; }

medium

A. Missing return statement

B. Component name cannot start with a number

C. JSX syntax error inside return

D. Component name must be lowercase

Solution

1. Step 1: Check component naming rules

   Component names must be valid JavaScript identifiers and start with a capital letter.

2. Step 2: Identify invalid name

   Names cannot start with a number, so "1stComponent" is invalid.

3. Final Answer:

   Component name cannot start with a number -> Option B

4. Quick Check:

   Valid identifiers start with letters = B [OK]

Hint: Component names must start with letters, not numbers [OK]

Common Mistakes:

• Starting component names with numbers
• Confusing lowercase requirement
• Assuming JSX syntax error when name is invalid

5. You want to create a component that shows a user's profile. Which is the best name following React naming rules and good practice?

hard

A. user_Profile

B. userprofile

C. UserProfile

D. User_profile

Solution

1. Step 1: Apply React component naming conventions

   React components should use PascalCase starting with uppercase letters.

2. Step 2: Choose clear and readable name

   "UserProfile" uses PascalCase and clearly describes the component's purpose.

3. Final Answer:

   UserProfile -> Option C

4. Quick Check:

   PascalCase and clarity = A [OK]

Hint: Use PascalCase with clear words for component names [OK]

Common Mistakes:

• Using all lowercase or underscores in names
• Mixing lowercase and uppercase incorrectly
• Choosing unclear or ambiguous names