React Components 2 — Questions and Answers
Question 1: What is the children prop in React?
- An age restriction
- The content placed between the opening and closing tags of a component, accessible via props.children (Correct answer)
- A required prop
- An error message
Correct answer: The content placed between the opening and closing tags of a component, accessible via props.children
props.children contains whatever is placed between a component's opening and closing tags, enabling component composition patterns.
Question 2: What is conditional rendering in React?
- Rendering on specific devices
- Showing different UI elements based on conditions using JavaScript operators like if, ternary, or && (Correct answer)
- Rendering CSS conditionally
- A performance optimization
Correct answer: Showing different UI elements based on conditions using JavaScript operators like if, ternary, or &&
Conditional rendering uses JavaScript logic within JSX to determine which elements to display based on state, props, or other conditions.
Question 3: What is a controlled component?
- A restricted component
- A form element whose value is controlled by React state rather than the DOM (Correct answer)
- A secure component
- A read-only component
Correct answer: A form element whose value is controlled by React state rather than the DOM
In controlled components, React state is the single source of truth for form inputs. Every change updates state, and state drives what is displayed.
Question 4: What is prop drilling?
- A hardware tool
- Passing props through multiple intermediate components that do not need them, just to reach a deeply nested child (Correct answer)
- A testing technique
- A rendering method
Correct answer: Passing props through multiple intermediate components that do not need them, just to reach a deeply nested child
Prop drilling occurs when data must pass through many component layers. Solutions include Context API, state management libraries, or component composition.
Question 5: What are keys in React lists?
- Keyboard shortcuts
- Unique identifiers that help React identify which list items have changed, been added, or removed (Correct answer)
- CSS selectors
- Database keys
Correct answer: Unique identifiers that help React identify which list items have changed, been added, or removed
Keys help React's reconciliation algorithm efficiently update lists by identifying individual elements. They should be stable, unique, and predictable.
Question 6: What is a React fragment?
- A broken component
- A wrapper (<></> or <Fragment>) that groups multiple elements without adding extra DOM nodes (Correct answer)
- A code snippet
- A partial render
Correct answer: A wrapper (<></> or <Fragment>) that groups multiple elements without adding extra DOM nodes
Fragments let you group multiple children without adding unnecessary wrapper divs to the DOM, keeping the HTML structure clean.
React Components 2
What is the children prop in React?