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.