React

Question 1

What’s wrong with this JSX code?

ReactDOM.render(

<h1>Hello</h1>

<p>Welcome</p>

,
document.getElementById(“root”)
);

Answer 1

JSX must return a single element. Wrap <h1> and <p> in a parent element like a <div> or a Fragment.

Question 2

In JSX, the HTML attribute ‘class’ becomes _________

Answer 2

className

Question 3

Complete this component and export it:

function Welcome() {
return <h1>Welcome!</h1>;
}

// Export it so it can be used in other files
__________

Answer 3

export default Welcome;

Question 4

Which of the following is not a valid way to render a React component named App?

A. <App></App>
B. ReactDOM.render(App, root)
C. ReactDOM.render(<App></App>, document.getElementById(“root”));
D. ReactDOM.render(<App></App>, root);

Answer 4

B — App needs to be wrapped in JSX (i.e., <App></App>), not passed as a raw function.

Question 5

How do you access props inside a functional component?

Answer 5

As the first argument: function MyComponent(props) {…} or via destructuring: function MyComponent({ title }) {…}

Question 6

When a component’s state updates via setState, what happens?

A. The page refreshes
B. The component re-renders
C. The component is unmounted
D. Nothing happens until you reload

Answer 6

B — React re-renders the component when state changes.

Question 7

To declare a state variable in a functional component, use the hook: _________

Answer 7

useState

Question 8

What is the initial value of count here?

const [count, setCount] = useState(0);

Answer 8

0

Question 9

Fix the error in this code:

function App() {
const [count, setCount] = useState
return <h1>{count}</h1>;
}

Answer 9

Missing parentheses — should be useState(0)

Question 10

Which syntax would you use to conditionally render a component if a user is logged in?

Answer 10

{isLoggedIn ? <Dashboard></Dashboard> : <Login></Login>}

Question 11

What will this code render?

{isLoggedIn && <p>Welcome back!</p>}

Answer 11

If isLoggedIn is true, it renders <p>Welcome back!</p>. If false, it renders nothing.

Question 12

In React, what’s a common pattern to avoid ‘else’ blocks in JSX?

Answer 12

Use short-circuit evaluation with && for simple conditions.

Question 13

What happens if you forget to call event.preventDefault() in a form submission handler?

Answer 13

The page will reload (default browser behavior).

Question 14

Why do we set the value of an <input></input> element to a state variable in React?

Answer 14

To create a controlled component — React becomes the single source of truth for the input value.

Question 15

Fill in the blank to handle input changes in a controlled form:

function handleChange(event) {
_________
}

Answer 15

setValue(event.target.value);

Question 16

Which event prop do you use to handle a button click in React?

Answer 16

onClick

Question 17

How do you pass a function with an argument to an onClick handler without calling it immediately?

Answer 17

Use an arrow function: onClick={() => myFunction(arg)}

Question 18

How do you stop a synthetic event from refreshing the page?

Answer 18

Call event.preventDefault() in the handler.

Question 19

What React feature allows you to access input changes without needing to use class components?

Answer 19

useState (a React hook)

Question 20

What naming convention is used for React component files and functions?

Answer 20

PascalCase (e.g., MyComponent.jsx, function MyComponent() {})

Question 21

How do you pass data to a component from its parent?

Answer 21

Via props: <ChildComponent></ChildComponent>

Question 22

How do you access props inside a functional component using destructuring?

Answer 22

function MyComponent({ title }) { return <h1>{title}</h1>; }

Question 23

How do you set a default value for a prop?

Answer 23

Use ComponentName.defaultProps = { title: ‘Default’ }

Question 24

What does React require each child in a list to have?

Answer 24

A unique ‘key’ prop

Question 25

What happens if a component is rendered without a required prop?

Answer 25

It may still render, but could result in undefined behavior unless propTypes are used.

Question 26

Fill in the blank to define propTypes for a component: MyComponent.propTypes = { title: __________, };

Answer 26

PropTypes.string.isRequired

Question 27

What is the benefit of using propTypes in a component?

Answer 27

It helps validate the type of props passed, improving maintainability and debugging.

Question 28

How do you pass a callback function to a child component?

Answer 28

As a prop:

Question 29

What’s the equivalent of emitting an event in Vue when using React?

Answer 29

Call a function passed via props from the child component.

Question 30

In TypeScript, how do you define a click event type in React?

Answer 30

Use: (event: React.MouseEvent) => void

Question 31

How do you define a component prop type using an interface?

Answer 31

interface Props { title: string }

Question 32

How do you annotate a component that receives props with TypeScript?

Answer 32

const Component: React.FC = ({ title }) => { ... }

Question 33

What TypeScript type should you use for a function prop that takes a string and returns nothing?

Answer 33

(value: string) => void

Question 34

What's the type for the 'children' prop in a TypeScript component?

Answer 34

ReactNode (from 'react')

Question 35

How do you define a union type for props in TypeScript?

Answer 35

type ButtonProps = 'primary' | 'secondary';

Question 36

How do you extend an existing interface in TypeScript?

Answer 36

interface NewProps extends ExistingProps { ... }

Question 37

What's a key difference between 'type' and 'interface' in TypeScript?

Answer 37

Interfaces can be reopened and extended; types are more flexible with unions/intersections.

Question 38

What is the correct syntax to import a type in TypeScript?

Answer 38

import type { MyType } from './types';

Question 39

Why is typing props useful in a React app using TypeScript?

Answer 39

Provides better autocompletion, catches errors at compile time, and improves maintainability.

Question 40

Which hook allows you to use state in a functional component?

Answer 40

useState

Question 41

Which hook is used to perform side effects in a functional component?

Answer 41

useEffect

Question 42

What is the equivalent of componentDidMount in useEffect?

Answer 42

useEffect(() => { ... }, [])

Question 43

How do you clean up in useEffect (like componentWillUnmount)?

Answer 43

Return a function from useEffect: useEffect(() => { return () => { ... } }, [])

Question 44

What does useEffect run by default when no dependency array is provided?

Answer 44

After every render

Question 45

How do you trigger useEffect only when a specific value changes?

Answer 45

Include it in the dependency array: useEffect(() => { ... }, [value])

Question 46

What happens if you update state directly in useEffect without dependencies?

Answer 46

It can cause an infinite render loop.

Question 47

How do you update a state variable based on the previous value?

Answer 47

Use a callback: setCount(prev => prev + 1)

Question 48

Can you call hooks conditionally inside components?

Answer 48

No — hooks must be called unconditionally in the top-level of the component.

Question 49

Why must hooks be called at the top level of a component?

Answer 49

To ensure React can track hook order between renders.

Question 50

Which array method is commonly used in React to render lists of components?

Answer 50

map()

Question 51

What must each element rendered with map() have?

Answer 51

A unique 'key' prop

Question 52

How would you remove an item from a list in state based on its index?

Answer 52

Use filter: array.filter((_, i) => i !== index)

Question 53

Which array method would you use to sum up values?

Answer 53

reduce()

Question 54

Fill in the blank to render a list of names: {names.________(name =>

{name}

)}

Answer 54

map

Question 55

How can you conditionally render only active users in a list?

Answer 55

Use filter before map: users.filter(u => u.active).map(...)

Question 56

What does the map method return?

Answer 56

A new array with the results of calling a function on every element.

Question 57

True or False: map() modifies the original array.

Answer 57

False — it returns a new array and leaves the original unchanged.

Question 58

What’s a common mistake when using map to render components in React?

Answer 58

Forgetting to add a key prop or using an unstable key like array index.

Question 59

Why is using index as a key in map discouraged?

Answer 59

It can cause rendering issues when items are reordered or removed.