Unit 2: Component Design and Styling - Practice Quiz
1 What is a functional component in React?
2 How should the name of a React functional component normally begin?
3 What are props primarily used for in React?
4 How do props help make a component reusable?
5 Which special prop commonly contains elements nested inside a React component?
children
innerHTML
nestedItems
contentType
6 What does component composition mean in React?
7 Which is the best example of a reusable component abstraction?
Button used on many pages
8 Which JavaScript operator is commonly used to render one of two React elements based on a condition?
value++
value = A
value % B
condition ? A : B
9
What does {isVisible && <Panel />} do in JSX?
Panel exactly two times
Panel from the project
Panel when isVisible is falsy
Panel when isVisible is truthy
10 What does lifting state up mean in React?
11 After state is lifted to a parent, how can a child usually request an update?
12 Which design usually gives a React component a clear responsibility boundary?
13 Which JSX attribute is normally used to apply a CSS class to an element?
classList
cssName
styleClass
className
14
What does the Tailwind CSS class text-center do?
15 What is the main idea of utility-first styling?
16
In the Tailwind class md:text-lg, when is text-lg applied by default?
md breakpoint and larger
md breakpoint
17 What is a good way to reuse the same styled button across a React application?
Button component
18
What should the alt attribute of an informative image provide?
19 Why should a form input have an associated label?
20 Which semantic HTML element should usually contain the primary content of a page?
<br>
<b>
<main>
<span>
21
A functional component receives an onSave callback and should call it only when the user clicks a button. Which JSX is correct?
<button onClick={onSave()}>Save</button>
<button onClick={onSave}>Save</button>
<button onClick={() => onSave}>Save</button>
<button onClick="onSave">Save</button>
22
A ProductCard must display different products and notify its parent when one is selected. Which prop design best supports reuse?
<ProductCard product={product} onSelect={handleSelect} />
<ProductCard productId="42" selected="true" />
<ProductCard onClick={handleSelect(product)} />
<ProductCard data={window.currentProduct} />
23
A reusable Panel should provide a border and padding while allowing callers to place arbitrary content inside it. Which API is most appropriate?
children
24 A reusable text input must work with a parent-managed form. Which interface makes the input a suitable controlled abstraction?
defaultValue and ignore later updates
value and onChange props
25
Consider {items.length && <List items={items} />}. What should replace it if nothing should appear when the array is empty?
Boolean(items) && <List items={items} />
items.length > 0 && <List items={items} />
items.length >= 0 && <List items={items} />
items.length || <List items={items} />
26
A SearchBox sibling controls the products shown by a ProductList. Where should the search query usually be stored?
SearchBox only
ProductList only
27
A UserProfile component fetches data, handles routing, formats dates, and renders a large form. Which refactoring best improves responsibility boundaries?
28
Two components import CSS Modules that both define a .title class. What is the expected result?
29
Which Tailwind class list gives a button horizontal padding of 1rem and vertical padding of 0.5rem using the default spacing scale?
px-4 py-2
p-4 gap-2
pl-4 pt-2
mx-4 my-2
30
A button variant is currently built as `bg-${color}-600`. Production CSS sometimes omits the generated class. What is the best utility-first solution?
31 A card should be full width by default, half width on medium screens, and one-third width on large screens. Which classes implement this?
w-1/3 md:w-1/2 lg:w-full
w-full md:w-1/2 lg:w-1/3
w-full sm:w-1/3 md:w-1/2
sm:w-full md:w-full lg:w-1/2
32
Several buttons share base Tailwind classes but differ by primary, danger, or secondary variants. Which approach is most maintainable?
33
A form displays the text Email address next to an email input. Which implementation reliably associates the label with the field?
<span>Email address</span><input name="email" />
<label htmlFor="email">Email address</label><input id="email" />
<label>Email address</label><input id="email" />
<p id="email">Email address</p><input name="email" />
34 A clickable control submits a search form. Which element best communicates its purpose and supplies native keyboard behavior?
<span role="link">Search</span>
<a onClick={submit}>Search</a>
<button type="submit">Search</button>
<div onClick={submit}>Search</div>
35
A component receives price and quantity props and only needs to display their product. How should total usually be produced?
price * quantity during rendering
36
A reusable Avatar should display Guest when no name prop is provided. Which functional component signature applies that default cleanly?
function Avatar(props = name: 'Guest') { ... }
function Avatar(name = 'Guest') { ... }
function Avatar({ name = 'Guest' }) { ... }
function Avatar({ name }) { name ||= props; }
37 A page must show an error message when a request fails, a spinner while loading, and content after successful loading. Which structure is clearest?
38 Two sibling inputs display Celsius and Fahrenheit values and must remain synchronized. Which state design is most appropriate?
39 A navigation menu should be hidden on small screens and use flex layout from the medium breakpoint upward. Which classes are correct?
flex md:hidden
md:hidden lg:block
invisible sm:flex
hidden md:flex
40 An icon-only button closes a dialog. Which implementation gives it an accessible name without making the decorative icon separately announced?
<button aria-label="Close"><svg aria-hidden="true" /></button>
<div aria-label="Close"><svg aria-hidden="true" /></div>
<button><svg title="Close" /></button>
<button role="img"><svg aria-label="Close" /></button>
41
A counter must increase by exactly 2 when incrementTwice is called, including when React batches state updates. Which implementation is correct?
function Counter() {
const [count, setCount] = useState(0);
// incrementTwice is defined here
}
const incrementTwice = () => { setCount(c => c + 1); setCount(c => c + 1); };
const incrementTwice = () => { setCount(count + 2); setCount(count); };
const incrementTwice = () => { setCount(count + 1); setCount(count + 1); };
const incrementTwice = () => { setCount(++count); setCount(++count); };
42 A reusable list must support unrelated item schemas, preserve item state during reordering, and allow callers to control rendering. Which prop API best satisfies these requirements?
<DataList items={items} getKey={item => item.uuid} renderItem={item => <Row item={item} />} />
<DataList items={items} renderItem={(item, index) => <Row key={index} item={item} />} />
<DataList items={items} keyField="uuid" rowType="Row" nameField="title" />
<DataList items={items.map(item => ({ ...item, key: Math.random() }))} />
43
A Dialog must own focus management and layout while allowing callers to provide arbitrary header, body, and footer content. Which design most directly applies composition without making Dialog depend on application-specific data?
<Dialog renderMode="record" recordId={record.id} actionName="remove" />
<Dialog titleText="Delete" bodyText="Confirm" buttonText="Remove" />
<Dialog header={<Title />} footer={<Actions />}> <Content /> </Dialog>
<Dialog data={record} type="delete" showCancel={true} showIcon={true} />
44 Several visually unrelated components require the same disclosure state, Escape-key behavior, and ARIA prop generation, but they must produce different markup. Which abstraction is most appropriate?
45
Given {unreadCount && <Badge>{unreadCount}</Badge>}, users see an unwanted 0 when unreadCount is zero. Which replacement hides the badge without rendering the numeric value?
{Boolean(unreadCount) && unreadCount && <Badge />}
{unreadCount || <Badge>{unreadCount}</Badge>}
{unreadCount ?? <Badge>{unreadCount}</Badge>}
{unreadCount > 0 ? <Badge>{unreadCount}</Badge> : null}
46
Two sibling temperature inputs must remain synchronized, but the currently edited input must temporarily accept incomplete text such as - or 1.. What should their nearest common parent store?
47 A page fetches orders, a list lays them out, and each row exposes a retry action. The retry requires page-level authentication and cache invalidation. Which boundary best separates responsibilities?
48
A CSS Module defines .root, .primary, and .danger. The component receives variant as either "primary" or "danger". Which expression correctly combines the scoped classes?
className="styles.root styles[variant]"
className={{styles[variant]}}
className={{variant}}
className={${styles.root} styles.variant}
49
A production build omits colors generated by className={bg-${color}-600}, although the classes appear during development. Assuming color comes from a fixed supported set, what is the most robust correction?
bg-red-600
tailwind: before assigning className
50 An application repeats a long button class list and must support consistent variants, disabled behavior, and loading indicators. Which refactoring best preserves utility-first styling while centralizing the design contract?
Button component with static utility strings selected by typed variant props
.button rule containing all possible declarations
51
Using Tailwind's default mobile-first breakpoints, when is an element with hidden md:flex lg:hidden xl:flex displayed?
md, and from lg to below xl only
lg to below xl because hidden resets at lg
md upward because the first responsive display rule wins
md to below lg, and again at xl and above
52
A reusable component uses className={clsx("px-4 py-2", className)}. A caller passes "px-2", but the intended override is unreliable because conflicting Tailwind utilities are both present. Which solution best expresses override semantics?
clsx so caller classes always control the cascade
!important to every utility in the component's default class collection
twMerge
53 A validation error is displayed immediately after an email field. Which markup gives the input an accessible name, exposes invalid state, and associates the error message with the field?
<label>Email</label><input name="email" invalid="true" /><p className="error">Invalid email</p>
<label htmlFor="email-error">Email</label><input id="email" /><p aria-invalid="true">Invalid email</p>
<label htmlFor="email">Email</label><input id="email" aria-invalid="true" aria-describedby="email-error" /><p id="email-error" role="alert">Invalid email</p>
<span id="email">Email</span><input aria-label="email-error" /><p role="status">Invalid email</p>
54 A card navigates to an article when its main area is activated, but it also contains an independent Save button. Which structure avoids invalid nested interactive controls while preserving both actions?
<button> for navigation and place a second Save <button> inside it
<article> with a heading link expanded by CSS and a sibling <button> layered above it
<article> and its nested Save <button> inside a single <a> element
<div onClick> and stop propagation from a nested clickable <span>
55
The following component unexpectedly resets Editor state whenever framed changes:
return framed
? <section className="frame"><Editor /></section>
: <Editor />;
Which redesign preserves Editor state while still toggling the frame?
return framed ? <section><Editor /></section> : <Fragment><Editor /></Fragment>;
return <section className={framed ? "frame" : undefined}><Editor /></section>;
return framed ? <section><Editor key="a" /></section> : <Editor key="a" />;
return <>{framed && <section />}<Editor key={framed} /></>;
56
While remaining in edit mode, the application may switch directly from record A to record B. The form initializes local state from record, but currently retains A's edits. Which rendering strategy intentionally resets the form for B?
<RecordForm key={record.id} record={record} />
<RecordForm record={record} reset={record !== record} />
<RecordForm key="record" record={{ ...record }} />
record && <RecordForm key={true} record={record} />
57 A parent fetches an updated array of products while two children share the current selection. Product objects may be replaced even when their IDs remain stable. What should the parent store as the authoritative selection?
58
A server-rendered component chooses "desktop" or "mobile" classes by reading window.innerWidth during render. The difference is purely visual. Which approach best avoids hydration mismatches and resize synchronization code?
window.innerWidth only when typeof window !== "undefined" during render
59
A custom horizontal tab interface uses elements with role="tab". Which interaction and ARIA model most closely follows the standard tabs pattern?
aria-expanded on every tab, Escape for movement, and links to unnamed tab panels
title
tabIndex, arrow-key navigation, aria-selected, and aria-controls references
tabIndex="0", use Tab for navigation, and place state in aria-checked
60
Consider this memoized component:
const SaveButton = React.memo(
function SaveButton({ label, onSave }) {
return <button onClick={onSave}>{label}</button>;
},
(prev, next) => prev.label === next.label
);
The parent passes an onSave callback that closes over the current draft. Why can clicking the button save an older draft when the label is unchanged?
onSave, so React may retain a render containing an older callback
Did this save you a night before the exam?
LPU Notes is free, and it stays free. Ads cover part of the server bill. The rest comes out of a student's own pocket: the domain, the storage, and keeping the site up through the weeks everyone needs it at once.
The payment button didn't load. An ad blocker or a filtered network is the usual reason. to try again.
Nothing here is ever locked, and nothing unlocks. Chip in only if it was worth it. What it pays for →