Custom Hooks in React
15 questions · 12 min · Medium
JSX Syntax and Rendering in ReactJS Quiz
Test your knowledge of JSX syntax and rendering in ReactJS, including JSX expressions, elements, fragments, conditional rendering, list rendering, attributes, event handling, component rendering, and the use of keys.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Context API in React
15 questions · 12 min · Medium
Conditional Rendering in React
15 questions · 12 min · Medium
Components & Props in React Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Lists and Keys in ReactJS Quiz
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What does JSX stand for in React?
- A. JavaScript XML
- B. Java Syntax Extension
- C. JavaScript Execution
- D. JSON XML
Show answer
A. JavaScript XML
JSX stands for JavaScript XML. It is a syntax extension that allows developers to describe UI elements using HTML-like markup within JavaScript.
-
2. Which syntax is used to embed a JavaScript expression inside JSX?
- A. Square brackets []
- B. Parentheses ()
- C. Curly braces {}
- D. Angle brackets <>
Show answer
C. Curly braces {}
Curly braces allow JavaScript expressions to be evaluated inside JSX, such as <p>{2 + 3}</p>.
-
3. Which JSX statement correctly renders a heading containing the value of a variable named title?
- A. <h1>title</h1>
- B. <h1>{title}</h1>
- C. <h1>[title]</h1>
- D. <h1>(title)</h1>
Show answer
B. <h1>{title}</h1>
Curly braces tell JSX to evaluate the JavaScript variable title and render its value rather than displaying the literal word title.
-
4. Which rule must be followed when returning multiple adjacent JSX elements from a component?
- A. Every element must use a different function
- B. All elements must be inside a form
- C. Every element must have a key
- D. The elements must be wrapped in a single parent element or a Fragment
Show answer
D. The elements must be wrapped in a single parent element or a Fragment
A component must return one root JSX element. Multiple sibling elements can be wrapped in a parent element or a Fragment.
-
5. Which syntax correctly creates a React Fragment without adding an extra DOM element?
- A. <><h1>Title</h1><p>Text</p></>
- B. <fragment><h1>Title</h1><p>Text</p></fragment>
- C. <div fragment><h1>Title</h1></div>
- D. <!><h1>Title</h1></!>
Show answer
A. <><h1>Title</h1><p>Text</p></>
The short Fragment syntax <>...</> groups multiple JSX elements without adding an extra DOM node.
-
6. How should a CSS class be assigned to an HTML element in JSX?
- A. className="container"
- B. cssClass="container"
- C. class="container"
- D. styleClass="container"
Show answer
A. className="container"
React JSX uses className to specify a CSS class on an element.
-
7. Which syntax correctly assigns an inline style in JSX?
- A. <p style="color: red">Hello</p>
- B. <p style={color: red}>Hello</p>
- C. <p style={{ color: 'red' }}>Hello</p>
- D. <p css={{ color: 'red' }}>Hello</p>
Show answer
C. <p style={{ color: 'red' }}>Hello</p>
The style attribute in JSX accepts a JavaScript object. The outer braces enter JavaScript expression mode, and the inner braces define the style object.
-
8. Which approach is commonly used for conditional rendering in JSX?
- A. Using SQL statements inside elements
- B. Using a ternary expression inside curly braces
- C. Using CSS selectors as JavaScript variables
- D. Using a return statement inside an HTML attribute
Show answer
B. Using a ternary expression inside curly braces
A ternary expression can select which element to render, such as {isLoggedIn ? <Dashboard /> : <Login />}.
-
9. Which JavaScript method is commonly used to render an array of elements in JSX?
- A. filterHTML()
- B. renderAll()
- C. forEach()
- D. map()
Show answer
D. map()
The map() method transforms each array item into a JSX element, allowing React to render a collection of elements.
-
10. Why does React commonly require a key prop when rendering a list of elements?
- A. To help React identify items between renders
- B. To apply CSS automatically
- C. To prevent components from receiving props
- D. To convert the array into a string
Show answer
A. To help React identify items between renders
Keys help React match list items across renders so it can update, insert, or remove elements efficiently and correctly.
-
11. Which expression renders nothing when the condition is false and displays a message when it is true?
- A. {condition ? null : <p>Message</p>}
- B. {condition && <p>Message</p>}
- C. {condition || <p>Message</p>}
- D. {condition = <p>Message</p>}
Show answer
B. {condition && <p>Message</p>}
The logical AND operator renders the paragraph when condition is truthy. Be careful when the left operand can be 0, because React may render that number.
-
12. Which JSX attribute is used to attach a click event handler to a button?
- A. onclick
- B. click
- C. onClick
- D. on-click
Show answer
C. onClick
React uses camelCase event props such as onClick. The value is typically a function reference, for example onClick={handleClick}.
-
13. What is the result of rendering <p>{5 + 3}</p> in JSX?
- A. The paragraph displays 8
- B. The paragraph displays 5 + 3 literally
- C. The paragraph displays {5 + 3} literally
- D. React throws an error because arithmetic is not allowed
Show answer
A. The paragraph displays 8
JSX evaluates the JavaScript expression inside curly braces and renders the resulting number as text.
-
14. Which statement about JSX comments is correct?
- A. <!-- This is a JSX comment -->
- B. {// This is a JSX comment}
- C. <comment>This is a JSX comment</comment>
- D. {/* This is a JSX comment */}
Show answer
D. {/* This is a JSX comment */}
JSX comments are written inside JavaScript expression braces using the block comment syntax.
-
15. Which function is commonly used to mount a React application to a DOM element in modern React?
- A. React.mount()
- B. createRoot()
- C. renderHTML()
- D. mountComponent()
Show answer
B. createRoot()
The createRoot() API from react-dom/client creates a React root for a DOM container. Calling root.render() then renders the React component tree into that root.