Select the correct answer (ONLY ONE answer is correct):

1. What are React props?

A. A way to store data in a React component.

B. A way to pass data from a parent component to a child component.
C. A way to pass data from a child component to a parent component.
D. A way to store and retrieve data from a global state.

2. In React, can props be modified by the child component?

A. Yes, child components can modify props directly.

B. No, props are read-only and cannot be modified by child components.
C. Only functional components can modify props.
D. It depends on the specific use case and component implementation.

3. Can a child component pass data back to its parent component using props?

A. Yes, child components can pass data back to the parent using props.
B. No, props can only be passed from parent to child, not vice versa.
C. Only functional components can pass data back to the parent.
D. It depends on the specific use case and component implementation.

4. Which of the following is the correct way to access a prop named name inside a React
component?

A. props.name
B. component.props.name
C. name.value
D. state.props.name

5. What is React state used for?

A. To store and manage data within a component.

B. To handle component rendering.
C. To pass data from a parent component to a child component.
D. To define component styles.

6. How can you pass an initial value to the state when using functional components with React
Hooks?

A. By assigning the initial value directly to the state variable.

B. Functional components cannot have an initial state value.
C. By using the setState() method with the initial value as an argument.
D. By calling the useState() hook with the initial value as an argument.

2
7. In React, what is a callback handler?

A. A component that handles callbacks from child components.

B. A special type of prop that allows communication between components.
C. A function that is called when an event occurs.
D. A method used to update the state of a component.

8. How can you pass a callback handler from a parent component to a child component in
React?

A. By using the props object and passing the callback as a prop.

B. By using the state object and assigning the callback to a state property.
C. By directly calling the callback function within the child component.
D. By importing the callback handler function from the parent component.

9. Which of the following best describes "lifting state" in React?

A. Moving the state from a parent component to a child component.

B. Removing state from a component and storing it externally.
C. Creating a new state in a separate component for shared data.
D. Moving the state from a child component to a parent component.

10. How do you declare a state variable using the useState hook?

A. let count = useState();

B. const {count, setCount} = React.useState();
C. const count = useState();
D. const [count, setCount] = useState();

11. What is the return value of the useState hook?

A. A single value representing the state.

B. An array with two elements: the state value and a function to update it.
C. An object with properties for the state value and a function to update it.
D. A function to retrieve the state value.

12. How do you update the state using the useState hook?

A. setCount(newValue);
B. count = newValue;
C. setState(newValue);
D. setState({ count: newValue });

13. What is the main advantage of using React Controlled Components?

A. Improved performance.
B. Simplicity of implementation.
C. Better control and synchronization of input values.
D. Automatic form validation.

3
14. What are side effects in React?

A. Actions performed by components when rendering.

B. Asynchronous operations that occur outside the component lifecycle
C. Directives used to control component behaviour.
D. Internal state changes within a component.

15. Which hook is used to handle side effects in React?

A. useEffect
B. useState
C. useReducer
D. useContext

16. When does the side effect code inside the useEffect hook run?

A. Before the component is rendered.

B. After the component is rendered.
C. Only when the component is first rendered.
D. Whenever the component's dependencies change.

17. Which of the following is a common use case for the useEffect hook?

A. Fetching data from an API.

B. Managing component state.
C. Handling user input events.
D. Styling components.

18. What is JavaScript object destructuring?

A. It is a way to combine multiple objects into a single object.

B. It is a way to extract properties from an object into separate variables.
C. It is a way to convert an object into an array.
D. It is a way to clone an object with the same properties.

19. How can you destructure props in a React component?

A. By using the ‘props’ keyword followed by dot notation.

B. By using the ‘props’ keyword followed by square brackets.
C. By using the ‘const {prop1, prop2} = props;’ syntax.
D. By using the ‘destructure (props) {}’ function.

20. What is the benefit of using object destructuring for props in React?

A. It allows for more concise and readable code.

B. It improves performance by reducing memory usage.
C. It enables direct modification of the original props object.
D. There is no benefit; it is just a different syntax for accessing props.

4
21. Which syntax is used to perform object destructuring in the component function signature?

A. function MyComponent(props) {}
B. function MyComponent({ prop1, prop2 }) {}
C. function MyComponent([prop1, prop2]) {}
D. function MyComponent({ prop1: value1, prop2: value2 }) {}

22. How can you provide default values for destructured props in the component function
signature?

A. function MyComponent({ prop1: value1 = 'default' }) {}

B. function MyComponent(props = { prop1: 'default' }) {}
C. function MyComponent({ prop1 = 'default' }) {}
D. Default values cannot be assigned in the component function signature.

23. What is the advantage of using object destructuring in the component function signature?

A. It simplifies the props usage within the component body.

B. It reduces the need to access props through the props object.
C. It improves component performance and efficiency.
D. It enables direct modification of props within the function signature.

24. Is object destructuring in the component function signature mandatory in React?

A. Yes, it is a required syntax for all React components.

B. No, it is optional and depends on the developer's preference.
C. Object destructuring is only applicable to class components, not function components.
D. It is mandatory for functional components, but not for class components.

25. What is a reusable component in React?

A. A component that can be used only once in a React application.

B. A component that can be used multiple times in different parts of a React application.
C. A component that can be used only within functional components.
D. A component that can be reused across different React applications.

26. What is the benefit of using reusable components in React?

A. It reduces the overall code complexity and duplication.

B. It allows for better separation of concerns.
C. It enables faster development of React application.
D. All the above

27. What is component composition in React?

A. The process of combining multiple components into a single component.

B. The process of passing data between components using props.
C. The process of nesting components within each other to create complex UI structures.
D. The process of adding styles and CSS classes to React components.

5
28. In React, what is an inline handler?

A. A function defined within a component's render method to handle events.

B. A global event handler defined in the root component of a React application.
C. A callback function passed as a prop to child components for event handling.
D. An event handler function that is defined directly within the JSX code of a component.

29. How is an inline handler defined in JSX?

A. By using the ‘onEvent’ attribute followed by an arrow function.

B. By defining a separate function and referencing it in the ‘onEvent’ attribute.
C. By using the ‘handleEvent’ attribute and directly passing the function as a value.
D. By using the ‘onClick’ attribute and providing the function as a value.

30. What is the advantage of using inline handlers in React?

A. They provide better code organization and reusability.

B. They allow for cleaner syntax and concise event handling.
C. They automatically bind the correct this context to the event handler.
D. They offer improved performance compared to separate event handler functions.

31. How does an inline handler differ from a callback handler in React?

A. Inline event handlers are more performant than callback handlers.

B. Inline event handlers allow for more flexibility in event handling.
C. Callback handlers are only used in class components, while inline event handlers are
used in functional components.
D. Inline handlers are defined within JSX, while callback handlers are passed as props.

32. Which of the following is an example of an inline event handler in React?

A. <button onClick={handleClick}>Click me</button>

B. <button onClick={() => handleClick()}>Click me</button>
C. <button onClick={this.handleClick}>Click me</button>
D. <button onClick={handleClick()}>Click me</button>

33. Can inline event handlers accept arguments in React?

A. Yes, arguments can be passed directly to the event handler function.

B. No, inline event handlers can only be used without arguments.
C. Arguments can only be passed using a separate event handler function.
D. Inline event handlers automatically receive the event object as an argument.

34. What is the recommended approach for handling complex logic in inline event handlers?

A. Inline event handlers should only be used for simple, concise functions.
B. Complex logic should be handled within separate event handler functions.
C. Inline event handlers support any level of complexity and are suitable for all scenarios.
D. Complex logic should be avoided in React components altogether.

6
35. How do you pass parameters to an inline event handler?

A. Parameters cannot be passed to inline event handlers.

B. Use the bind() method to bind the parameters to the inline handler function.
C. Pass the parameters directly within the JSX markup.
D. Define the parameters as component state variables.

36. Which of the following statements about JavaScript promises is true?

A. Promises are a way to handle synchronous operations only.

B. Promises can only be resolved successfully; they cannot be rejected.
C. Promises are an alternative to callbacks for handling asynchronous operations.
D. Promises can only be used in the browser environment.

37. What does the "fulfilled" state of a Promise indicate?

A. The operation was completed successfully.

B. The operation failed.
C. The Promise is still pending.
D. The Promise is in an invalid state.

38. What is conditional rendering in React?

A. Rendering components based on user input.

B. Rendering components sequentially/
C. Rendering different components based on conditions.
D. Rendering components in parallel.

39. Which of the following methods can be used for conditional rendering in React?

A. Ternary operator.
B. if-else statements.
C. Logical && operator.
D. All the above.

40. What is the syntax of the ternary operator in React conditional rendering?

A. condition ? component1 && component2

B. component1 ? condition : component2
C. condition ? component1 : component2
D. component1 ? component2 : condition

41. What is the purpose of the condition in the logical AND operator (&&) for conditional
rendering?

A. To specify the component to render.

B. To determine whether to render the component.
C. To define the state of the component.
D. To set the value of a prop.

7
42. What is the correct way to conditionally render content based on a state value in React?

A. {stateValue === 'condition' && <div>Content</div>}

B. if(stateValue==='condition'){
return<div>Content</div>;
}
C. <RenderIf condition={stateValue ==='condition'}>
<div>Content</div>
</RenderIf>
D. return stateValue === 'condition' ? <div>Content</div> : null;

43. What does the `fetch` function return in React?

A. The fetched data directly.

B. An error message if the request fails.
C. An array of JSON objects.
D. A promise that resolves to a response object.

44. Which of the following statements is true about handling errors with the `fetch` function in
React?

A. The `fetch` function automatically handles errors and displays them.

B. Error handling with `fetch` requires using the `catch` method on the returned promise.
C. The `fetch` function throws an exception if the request fails.
D. The `fetch` function requires an additional library for error handling.

45. What is the correct and concise way to use the `fetch` function to make a GET request in
React?

fetch(url, {
method: 'GET'
A. })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
fetch.get(url)
B. .then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
fetch(url)
C. .then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
fetch(url)
.get()
D.
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

8
46. Which of the following is an example of implicit search in React?

A. A search that triggers when a button is clicked.

B. A search that filters data based on a specific category.
C. A search that fetches results from an external API.
D. A search that updates results in real-time as the user types.

47. What is a loading indicator in React?

A. A component that displays a progress bar.

B. A feature that automatically reloads the page when data is not ready.
C. A visual cue that indicates the application is fetching or processing data.
D. A technique used to optimize React components for faster rendering.

48. How can you conditionally render a loading indicator in React?

A. Using the `isLoading` prop and a conditional statement in the component's render
method.
B. Using the `setTimeout` function to delay the rendering of the loading indicator.
C. Adding a CSS class to the component when loading is in progress.
D. Wrapping the component with a higher-order component that handles the loading state.

49. What is the recommended approach for displaying error messages to users in React?

A. Using console.log statements to output error messages to the browser console.

B. Showing a generic error message for all types of errors.
C. Rendering a user-friendly error message in the UI based on the error type.
D. Hiding the error message and silently recovering from errors without user awareness.

50. Which of the following statements is true when fetching asynchronous data in React using
hooks?

A. The useEffect hook with an empty dependency array is used to fetch data once when
the component mounts.
B. The useEffect hook with a dependency array containing the data variable is used to
fetch data whenever the data changes.
C. The useEffect hook with a dependency array containing an empty object is used to fetch
data on every component re-render.
D. The useEffect hook is not suitable for fetching asynchronous data in React.