MCQs Of Day 3: JSX - JavaScript XML

MCQs Of Day 3: JSX - JavaScript XML

Part 1: Basics of JSX

1. What does JSX stand for?

o A) JavaScript Syntax Extension

o B) JavaScript XML

o C) Java and XML Syntax

o D) JSON XML
Answer: B) JavaScript XML

2. JSX is primarily used in which library?

o A) Angular

o B) Vue

o C) React

o D) Svelte
Answer: C) React

3. Which of the following is true about JSX?

o A) It allows HTML to be written inside JavaScript code.

o B) It is a backend technology.

o C) It’s a JavaScript framework.

o D) It cannot be used with HTML.
Answer: A) It allows HTML to be written inside JavaScript code.

4. What is the main purpose of JSX in React?

o A) To write CSS in JavaScript

o B) To describe UI elements

o C) To handle HTTP requests

o D) To manage state
Answer: B) To describe UI elements

5. JSX elements must be wrapped in a single...

o A) Array

o B) String

o C) Parent element

o D) JSON object
Answer: C) Parent element

6. Which symbol is used to embed JavaScript expressions inside JSX?

o A) []

o B) ()

o C) {}

o D) <>
Answer: C) {}

7. Which of the following is not a valid JSX expression?

o A) {2 + 2}

o B) {console.log("Hello")}

o C) {undefined}

o D) {function() { return "Hi"; }}
Answer: B) {console.log("Hello")}

8. In JSX, which syntax is correct for adding a CSS class?

o A) class

o B) className

o C) cssClass

o D) css
Answer: B) className

9. What will {true ? "Yes" : "No"} output in JSX?

o A) Yes

o B) No

o C) Error

o D) Null
Answer: A) Yes

10. In JSX, what happens when you don't wrap multiple sibling elements in a parent?

o A) They render normally.

o B) They throw an error.

o C) They render but without styling.

o D) Only the first element renders.
Answer: B) They throw an error.

Part 2: JSX with JavaScript Expressions

11. Which JavaScript function can be used to display the current date in JSX?

o A) currentDate()

o B) new Date()

o C) Date()

o D) Date.now()
Answer: B) new Date()

12. How can you embed a JavaScript variable in JSX?

o A) [variable]

o B) (variable)

o C) {variable}

o D) <variable>
Answer: C) {variable}

13. If const name = "John"; and you render <h1>{name}</h1>, what will display?

o A) name

o B) {name}

o C) John

o D) Undefined
Answer: C) John

14. What will happen if you try to use JSX without importing React?

o A) It will work normally.

o B) It will throw an error.

o C) Only partial rendering will work.

o D) Nothing will display.
Answer: B) It will throw an error.

15. Which of the following is not a valid data type to display in JSX?

o A) String

o B) Array

o C) Object

o D) Boolean
Answer: C) Object

Part 3: Props in JSX

16. In React, what is the purpose of props?

o A) To manage component state

o B) To store CSS styles

o C) To pass data to components

o D) To handle events
Answer: C) To pass data to components

17. How do you define default values for props in a React component?

o A) Using defaultProps

o B) Using propDefaults

o C) Using defaultValues

o D) Using initialProps
Answer: A) Using defaultProps

18. In JSX, which attribute is used to pass a prop called name with the value "Alice"?

o A) name="Alice"

o B) props.name="Alice"

o C) props.name

o D) setName("Alice")
Answer: A) name="Alice"

19. If a component has props.name but no prop is passed, what happens?

o A) It throws an error.

o B) It renders undefined.

o C) It shows a warning.

o D) It displays null.
Answer: B) It renders undefined.

20. What is the recommended way to destructure props in a functional component?

o A) props: { name }

o B) ({ props.name })

o C) ({ name })

o D) props.name
Answer: C) ({ name })

Part 4: Conditional Rendering

21. In JSX, which syntax is used for inline conditional rendering?

o A) if-else

o B) switch

o C) Ternary operator ? :

o D) forEach
Answer: C) Ternary operator ? :

22. What does {isLoggedIn ? "Welcome" : "Please Log In"} display if isLoggedIn is false?

o A) Welcome

o B) Please Log In

o C) null

o D) true
Answer: B) Please Log In

23. What is the output of {score > 90 ? "A" : score > 75 ? "B" : "C"} if score is 80?

o A) A

o B) B

o C) C

o D) Error
Answer: B) B

24. What happens when {isValid && <p>Valid</p>} is used and isValid is true?

o A) "Valid" is displayed.

o B) Nothing is displayed.

o C) An error is thrown.

o D) false is displayed.
Answer: A) "Valid" is displayed.

25. Which of the following is suitable for conditional rendering in JSX?

o A) If statements

o B) Switch case

o C) Ternary operators

o D) All of the above
Answer: D) All of the above

Part 5: Mapping Arrays in JSX

26. What does .map() do when used on an array in JSX?

o A) Loops through the array without returning anything.

o B) Creates a new array by transforming each element.

o C) Adds an element to the end of the array.

o D) Filters out elements from the array.
Answer: B) Creates a new array by transforming each element.

27. Which property should be provided when mapping elements in JSX?

o A) id

o B) ref

o C) class

o D) key
Answer: D) key

28. What does the key prop do when rendering lists in JSX?

o A) It assigns a CSS class.

o B) It acts as a unique identifier for each element.

o C) It helps React style each element.

o D) It binds events to each element.
Answer: B) It acts as a unique identifier for each element.

29. If you don’t provide a key prop when mapping in JSX, what could happen?

o A) React will throw an error.

o B) React may re-render inefficiently.

o C) The list won’t render.

o D) The keys will be auto-generated correctly.
Answer: B) React may re-render inefficiently.

30. When rendering a list with map(), where should the key attribute be added?

o A) On the outer container

o B) On the inner element

o C) On each mapped element

o D) On the map() function
Answer: C) On each mapped element

Continuing with more questions on advanced conditional rendering, styling with JSX, handling events, and default props...

ChatGPT said:

ChatGPT

. Which React lifecycle method is called after a component has been rendered to the screen? - A) componentDidUpdate - B) componentDidMount - C) render - D) getDerivedStateFromProps
Answer: B) componentDidMount

The list continues, covering topics related to components, events, state management, hooks, React Router, and other advanced JSX and React concepts. The pattern of questions follows similar principles, progressively addressing key aspects of working with React and JSX for a comprehensive understanding.

2/2

4o mini

You said:

ChatGPT said:

ChatGPT

Here are more multiple-choice questions to continue from where we left off:

Part 6: Advanced JSX Concepts

31. In JSX, which of the following is valid to use when writing class names for a component?

A) class
B) className
C) classname
D) styleClass
Answer: B) className

32. Which statement about JSX is true?

A) JSX is optional in React but preferred for declarative syntax.
B) JSX is mandatory to use in React.
C) JSX is not allowed in React.
D) JSX is only used for styling.
Answer: A) JSX is optional in React but preferred for declarative syntax.

33. What happens if you try to return multiple JSX elements without wrapping them in a parent element?

A) React will combine them into one element.
B) React will throw an error.
C) The elements will be rendered separately but without any styling.
D) React will ignore the error and render just the first element.
Answer: B) React will throw an error.

34. Which of the following is a valid React fragment?

A) <Fragment></Fragment>
B) <Fragment />
C) <> </>
D) All of the above
Answer: D) All of the above

35. How do you pass a value to a component through props?

A) prop=value
B) props: value
C) props(value)
D) value.props
Answer: A) prop=value

Part 7: Handling Events in JSX

36. Which of the following is used to handle an event in JSX?

A) onClick
B) click
C) handleClick
D) eventClick
Answer: A) onClick

37. In JSX, how do you attach an event handler to an element?

A) element.addEventListener("click", functionName)
B) onClick={functionName}
C) addEventListener="click" {functionName}
D) click={functionName}
Answer: B) onClick={functionName}

38. In JSX, which method is used to prevent the default behavior of a form submission event?

A) preventDefault()
B) stopPropagation()
C) clearEvent()
D) cancelEvent()
Answer: A) preventDefault()

39. How do you bind the this context in an event handler in JSX?

A) this.function()
B) this.function.bind(this)
C) function.bind(this)
D) bind(this).function()
Answer: B) this.function.bind(this)

40. Which of the following is the correct syntax to pass an argument to an event handler in JSX?

A) <button onClick="handleClick('Hello')">Click Me</button>
B) <button onClick={() => handleClick('Hello')}>Click Me</button>
C) <button onClick={handleClick('Hello')}>Click Me</button>
D) <button onClick={handleClick}>Click Me</button>
Answer: B) <button onClick={() => handleClick('Hello')}>Click Me</button>

Part 8: State in JSX

41. Which hook is used to manage state in a functional component in React?

A) useState()
B) useContext()
C) useEffect()
D) useReducer()
Answer: A) useState()

42. Which method is used to update the state value when using the useState hook?

A) setState()
B) set()
C) updateState()
D) setSomething()
Answer: A) setState()

43. What is the default value of a state variable when it is initialized using useState()?

A) null
B) undefined
C) The value passed as an argument to useState()
D) false
Answer: C) The value passed as an argument to useState()

44. What will happen if you try to update the state directly without using the setter function in useState()?

A) The state will not update.
B) The component will re-render with the updated state.
C) React will throw an error.
D) Nothing will happen.
Answer: A) The state will not update.

45. Which of the following is the correct way to access the state value after calling useState()?

A) state()
B) state.value
C) state[0]
D) state
Answer: C) state[0]

Part 9: Handling Forms in JSX

46. In React, what is the purpose of controlled components?

A) To bind form elements to the component's state.
B) To manage events in a form.
C) To update form fields directly.
D) To prevent form submission.
Answer: A) To bind form elements to the component's state.

47. What is the correct way to handle form input changes in React?

A) Using the onSubmit event
B) Using the onChange event
C) Using the input event
D) Using the onInput event
Answer: B) Using the onChange event

48. Which of the following syntax is correct for binding an input field value to a state variable in JSX?

A) <input value={stateValue} onChange={updateState} />
B) <input defaultValue={stateValue} onChange={updateState} />
C) <input value={stateValue} />
D) <input value={stateValue} onClick={updateState} />
Answer: A) <input value={stateValue} onChange={updateState} />

49. What is the reason for using defaultValue in an input field in React?

A) To set the initial value for an uncontrolled component.
B) To bind the value to the state.
C) To update the form input directly.
D) To prevent state updates.
Answer: A) To set the initial value for an uncontrolled component.

50. Which method is used to submit a form in JSX?

A) submit()
B) onSubmit()
C) formSubmit()
D) handleSubmit()
Answer: B) onSubmit()

Part 10: Advanced JSX and React Features

51. What is React Fragment used for?

A) To render multiple elements without creating additional DOM nodes.
B) To enhance styling.
C) To handle form submissions.
D) To manage component states.
Answer: A) To render multiple elements without creating additional DOM nodes.

52. What is the role of the key prop when rendering lists in React?

A) To bind events to list elements.
B) To ensure that React efficiently updates the list.
C) To set the CSS class for each item.
D) To handle state within the list.
Answer: B) To ensure that React efficiently updates the list.

53. How does React handle state updates?

A) By re-rendering the entire page.
B) By updating only the changed components.
C) By replacing the DOM entirely.
D) By ignoring the updates.
Answer: B) By updating only the changed components.

54. What is the default behavior of React when a component's state is updated?

A) The component is re-rendered.
B) The component does not render.
C) The component will log the state in the console.
D) The component will not re-render unless the parent component re-renders.
Answer: A) The component is re-rendered.

55. In JSX, what does the dangerouslySetInnerHTML prop do?

A) Sets HTML content inside an element.
B) Sets raw HTML from external sources.
C) Prevents XSS attacks.
D) Protects against invalid HTML content.
Answer: A) Sets HTML content inside an element.

Continuing...

56. What is the purpose of the useEffect hook in React?

A) To manage state.
B) To handle side effects like fetching data, setting up subscriptions.
C) To manage event handling.
D) To update components based on their props.
Answer: B) To handle side effects like fetching data, setting up subscriptions.

This list can be extended further as needed, covering concepts like hooks, context, routing, and performance optimization techniques in React.

4o mini

You said:

ChatGPT said:

ChatGPT

Here are additional multiple-choice questions to continue from where we left off:

Part 11: React Lifecycle Methods

56. Which React lifecycle method is called immediately after a component is mounted (inserted into the tree)?

A) componentDidUpdate
B) componentDidMount
C) render
D) getDerivedStateFromProps
Answer: B) componentDidMount

57. Which of the following lifecycle methods is called before a component is removed from the DOM?

A) componentWillUnmount
B) componentDidMount
C) shouldComponentUpdate
D) render
Answer: A) componentWillUnmount

58. Which method is called when the component's state or props change, and before the render method is executed?

A) componentDidUpdate
B) componentWillReceiveProps
C) shouldComponentUpdate
D) componentDidMount
Answer: C) shouldComponentUpdate

59. What is the purpose of getDerivedStateFromProps in React?

A) To handle state changes based on props.
B) To update state after props have changed.
C) To render new components based on changes in props.
D) To prevent state updates.
Answer: A) To handle state changes based on props.

60. In class components, which lifecycle method is used to initialize the state?

A) getInitialState
B) constructor
C) componentDidMount
D) render
Answer: B) constructor

Part 12: Conditional Rendering in React

61. Which of the following is the correct syntax to conditionally render a component in React?

A) if (condition) { return <Component /> }
B) if (condition) <Component />
C) { condition ? <Component /> : null }
D) if (condition) <Component /> else null
Answer: C) { condition ? <Component /> : null }

62. Which of the following is NOT a valid way to conditionally render in React?

A) Ternary operator
B) && operator
C) if statements in JSX
D) switch statements in JSX
Answer: D) switch statements in JSX

63. What does the && operator do when used for conditional rendering in React?

A) Renders the component if the condition is true.
B) Always renders the component.
C) Renders the component if the condition is false.
D) Does not render anything if the condition is false.
Answer: A) Renders the component if the condition is true.

64. Which of the following methods can be used to render a list of elements in React?

A) map() function
B) forEach() function
C) reduce() function
D) filter() function
Answer: A) map() function

65. How do you handle fallback content for loading state when conditionally rendering a component?

A) condition ? <Component /> : <LoadingSpinner />
B) condition ? <Component /> else <LoadingSpinner />
C) condition && <Component /> : <LoadingSpinner />
D) condition ? <Component /> or <LoadingSpinner />
Answer: A) condition ? <Component /> : <LoadingSpinner />

Part 13: Hooks in React

66. Which hook is used to perform side effects in function components?

A) useEffect
B) useState
C) useContext
D) useReducer
Answer: A) useEffect

67. What does the useState hook do in React?

A) It allows functional components to access the React lifecycle.
B) It updates the component’s state without causing a re-render.
C) It initializes and updates a piece of state in a functional component.
D) It allows components to fetch data from an API.
Answer: C) It initializes and updates a piece of state in a functional component.

68. Which of the following is the correct syntax for using useState hook in React?

A) const [state, setState] = useState(value)
B) const state = useState(value)
C) const setState = useState()
D) const [state, setState] = useState()
Answer: A) const [state, setState] = useState(value)

69. What will happen if useEffect has an empty dependency array []?

A) It will run the effect only once when the component is mounted.
B) It will run the effect after every render.
C) It will not run the effect at all.
D) It will run the effect on every prop change.
Answer: A) It will run the effect only once when the component is mounted.

70. What is the purpose of useRef hook in React?

A) It provides a way to access and modify DOM elements directly.
B) It is used for managing state in functional components.
C) It triggers re-renders of the component.
D) It manages side effects like API calls.
Answer: A) It provides a way to access and modify DOM elements directly.

Part 14: React Context API

71. What is the React Context API used for?

A) To manage local component state.
B) To pass data through the component tree without having to pass props manually at every level.
C) To create a global state across multiple components.
D) Both B and C
Answer: D) Both B and C

72. Which of the following is used to provide context in React?

A) Context.Provider
B) Context.Consumer
C) useContext
D) React.Provider
Answer: A) Context.Provider

73. Which hook is used to consume context in functional components?

A) useState
B) useEffect
C) useContext
D) useRef
Answer: C) useContext

74. Which of the following is the correct syntax to consume context in a class component?

A) <MyContext.Consumer>{value => ...}</MyContext.Consumer>
B) useContext(MyContext)
C) <MyContext.Provider>{value => ...}</MyContext.Provider>
D) React.Consumer(MyContext)
Answer: A) <MyContext.Consumer>{value => ...}</MyContext.Consumer>

75. How does React Context help avoid "prop drilling"?

A) By reducing the need to manually pass props down the component tree.
B) By using the useState hook to manage state at the root level.
C) By preventing components from re-rendering.
D) By making all components global.
Answer: A) By reducing the need to manually pass props down the component tree.

Part 15: React Router

76. Which of the following packages is used for routing in React?

A) react-router-dom
B) react-router
C) react-router-redux
D) react-router-react
Answer: A) react-router-dom

77. Which component in React Router is used to define a route?

A) Route
B) Switch
C) Link
D) NavLink
Answer: A) Route

78. How do you link to a different route in React Router?

A) window.location = '/path'
B) redirect('/path')
C) <Link to="/path">Go to Path</Link>
D) <Route to="/path">Go to Path</Route>
Answer: C) <Link to="/path">Go to Path</Link>

79. What is the purpose of Switch in React Router?

A) To ensure that only the first matching route is rendered.
B) To display all routes.
C) To enable dynamic route matching.
D) To switch between different components.
Answer: A) To ensure that only the first matching route is rendered.

80. What will the exact prop in React Router do?

A) It will match the route exactly as the URL.
B) It will match all routes regardless of URL.
C) It will trigger an alert when matched.
D) It will disable the route matching.
Answer: A) It will match the route exactly as the URL.

This set covers important aspects of React, including lifecycle methods, conditional rendering, hooks, context, and routing. The questions progressively introduce new concepts that are crucial for mastering React development.

4o mini

You said:

ChatGPT said:

ChatGPT

Here are more multiple-choice questions on various React concepts:

Part 16: React State and Props

81. In React, which of the following is used to modify the state of a component?

A) this.state = value
B) this.setState()
C) this.props = value
D) this.updateState()
Answer: B) this.setState()

82. What is the main difference between props and state in React?

A) props are mutable, but state is immutable.
B) state is mutable, but props are immutable.
C) Both state and props are immutable.
D) Both state and props are mutable.
Answer: B) state is mutable, but props are immutable.

83. Which of the following is used to pass data from a parent component to a child component in React?

A) state
B) props
C) render()
D) useEffect
Answer: B) props

84. When should you use state in React?

A) When you want to store static data.
B) When you need to pass data to child components.
C) When data needs to change over time or in response to user actions.
D) When data should remain unchanged.
Answer: C) When data needs to change over time or in response to user actions.

85. Which of the following statements is true about setState() in React?

A) setState() is asynchronous and can be batched.
B) setState() is synchronous and updates the state immediately.
C) setState() is synchronous and does not trigger a re-render.
D) setState() is used only in functional components.
Answer: A) setState() is asynchronous and can be batched.

Part 17: React Forms

86. What is the term used for an element that controls the form input value in React?

A) Controlled component
B) Uncontrolled component
C) Form component
D) Input element
Answer: A) Controlled component

87. In a controlled component, how is the input value updated in React?

A) By directly modifying the input field's value.
B) By using setState to update the state.
C) By using props to update the state.
D) By using useEffect hook.
Answer: B) By using setState to update the state.

88. Which React event handler is used to handle changes to form input fields?

A) onChange
B) onInput
C) onSubmit
D) onClick
Answer: A) onChange

89. Which of the following is the correct way to handle form submission in React?

A) Using the onSubmit event handler and calling preventDefault().
B) Directly submitting the form with submit().
C) Using setState() to submit the form.
D) Automatically submitting when the form is rendered.
Answer: A) Using the onSubmit event handler and calling preventDefault().

90. How would you prevent the default form submission in React?

A) By returning false in the onSubmit handler.
B) By calling event.preventDefault() in the onSubmit handler.
C) By using useEffect() hook.
D) By setting form.submit = false.
Answer: B) By calling event.preventDefault() in the onSubmit handler.

Part 18: React Performance Optimization

91. Which React feature helps optimize performance by memorizing the output of a component?

A) useState
B) useEffect
C) React.memo()
D) componentShouldUpdate()
Answer: C) React.memo()

92. What does the React.PureComponent class do?

A) It automatically handles state and props.
B) It prevents unnecessary re-renders by implementing shouldComponentUpdate.
C) It is used only for stateless components.
D) It runs useEffect() by default.
Answer: B) It prevents unnecessary re-renders by implementing shouldComponentUpdate.

93. Which hook should be used to optimize performance when handling complex computations in functional components?

A) useState
B) useEffect
C) useMemo
D) useCallback
Answer: C) useMemo

94. Which of the following hooks is used to memoize callback functions and prevent unnecessary re-renders?

A) useMemo
B) useEffect
C) useCallback
D) useState
Answer: C) useCallback

95. What is the purpose of React.lazy() in React?

A) To optimize the rendering of components by delaying their load.
B) To prevent re-renders of a component.
C) To allow for asynchronous rendering of React elements.
D) To load static assets lazily.
Answer: A) To optimize the rendering of components by delaying their load.

Part 19: React Testing

96. Which testing library is commonly used for testing React components?

A) jest
B) chai
C) mocha
D) enzyme
Answer: D) enzyme

97. In React testing, which of the following methods is used to simulate a click event?

A) fireEvent.click()
B) simulateClick()
C) trigger('click')
D) simulate('click')
Answer: A) fireEvent.click()

98. What is the purpose of act() in React testing?

A) To simulate DOM events.
B) To trigger state updates in tests.
C) To perform actions that update the component and ensure all effects are processed.
D) To handle asynchronous operations during tests.
Answer: C) To perform actions that update the component and ensure all effects are processed.

99. Which of the following is used to mock functions during testing in React?

A) mockFunction()
B) jest.fn()
C) simulate()
D) render() Answer: B) jest.fn()

100. What is the main purpose of React testing libraries like jest and enzyme?

A) To ensure the UI is styled properly.
B) To test the logic and functionality of React components.
C) To improve component rendering performance.
D) To simulate user interaction with the component.
Answer: B) To test the logic and functionality of React components.

MCQs Of Day 3: JSX - JavaScript XML

Post a Comment

How to Create Login and Register Modals in React (Step-by-Step)

Contact form

MCQs Of Day 3: JSX - JavaScript XML

You Might Like

Post a Comment

Contact form