Practice Questions

An expression produces a value (e.g., 2 + 3, isActive ? "yes" : "no", items.map(fn)). A statement performs an action but does not produce a value (e.g., if, for, while). JSX curly braces are compiled into function arguments, which must be expressions.

You cannot write an if statement inside JSX:

// ❌ Won't work
<p>{if (loggedIn) { "Welcome" }}</p>

Use a ternary or && instead:

// ✅ Ternary
<p>{loggedIn ? "Welcome" : "Please sign in"}</p>

// ✅ Logical AND
<p>{loggedIn && "Welcome"}</p>

interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  return <p>Hello, {name}!</p>;
}

export default Greeting;

The interface defines the expected prop types, and destructuring extracts name from the props object.

The key prop helps React identify which items in a list have changed, been added, or been removed. React uses keys to match elements between renders so it can update the DOM efficiently.

Using the array index is problematic when items can be reordered, inserted, or deleted, because the index is tied to position, not identity. React may reuse the wrong DOM node, leading to bugs (e.g., input values appearing in the wrong row).

Using the index is acceptable when the list is static and will never be reordered or filtered. An example is a fixed grid of cells that always appear in the same order.

<ul>
  {colors.map((color) => (
    <li key={color.id}>{color.name}</li>
  ))}
</ul>

Using color.id as the key is ideal because it is a stable, unique identifier from the data itself.

Props are data passed from a parent to a child. They are read-only from the child’s perspective. State is data owned and managed by the component itself. It can change over time.

When you write const [count, setCount] = useState(initialCount), the prop is used only as the initial value. After that, the state is independent. If the parent later passes a different initialCount, the state does not reset. useState only reads its argument on the first render. As soon as setCount is called, the state and the prop can hold different values.

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return <button onClick={() => setIsOn(!isOn)}>{isOn ? "ON" : "OFF"}</button>;
}

export default Toggle;

The boolean state isOn drives the displayed text. Clicking the button flips the state, which triggers a re-render with the updated text.

When two sibling components need shared state, you move (lift) that state to their closest common parent.

1. State lives in the parent — the parent calls useState and owns the data.
2. Data flows down via props — the parent passes the current state value to each child as a prop.
3. Events flow up via callback props — the parent passes a handler function (e.g., onChange, onUpdate) as a prop. When a child needs to change the state, it calls the callback, which triggers setState in the parent, causing a re-render with the new value.

This produces React’s one-way data flow: props down, events up.

interface ChildProps {
  text: string;
  onTextChange: (newText: string) => void;
}

function Child({ text, onTextChange }: ChildProps) {
  return <input value={text} onChange={(e) => onTextChange(e.target.value)} />;
}

function Parent() {
  const [text, setText] = useState("");
  return <Child text={text} onTextChange={setText} />;
}

The state is lifted from Child to Parent. Child no longer calls useState — it receives the current value and a callback. This makes Child a controlled component driven entirely by its parent.

A <button> element is semantic HTML. It tells the browser and assistive technologies that this element is an interactive control. Built-in behaviors include:

1. Keyboard accessibility. A button can be focused with Tab and activated with Enter or Space without any extra code.
2. Screen reader announcement. Assistive technologies announce it as a button, so users know it is interactive.
3. Focus styling. Browsers provide default focus indicators for buttons.

A <div> with onClick has none of these by default. You would need to manually add tabIndex, role="button", keyboard event handlers, and ARIA attributes to match what <button> provides out of the box.

Add an aria-label attribute to give the button an accessible name:

<button onClick={handleDelete} aria-label="Delete item">
  🗑️
</button>

The aria-label provides a text description that screen readers will announce instead of (or in addition to) the visible content. The visual appearance stays the same, but assistive technologies now have meaningful text to read.

1. The user clicks the button, which fires the onClick handler.
2. The handler calls setValue(newValue), which tells React that this component’s state has changed.
3. React schedules a re-render of the component.
4. During re-render, React calls the component function again. This time, useState returns the new value instead of the old one.
5. The component returns new JSX based on the updated state.
6. React compares the new JSX with the previous output (diffing) and applies only the necessary DOM updates.

Calling setValue does not mutate anything directly. It tells React to re-render, and the new UI is whatever the component function returns when it runs again with the updated state.

A component that owns its state calls useState internally and manages its own data. A controlled component has no internal state. It receives all data via props and reports changes through callback props.

Scenario: You build a SearchBox component that manages its own input text with useState. It works fine on its own. Later, you need to add a “Clear All Filters” button in a parent component that should also reset the search text. Since the parent cannot reach into SearchBox’s internal state, you lift the search text state up to the parent. SearchBox becomes a controlled component that receives value and onChange as props, and the parent can now reset it alongside other filters.

You lift state up when more than one place needs the same piece of state. That includes the parent itself, if the parent needs to read or change it.