Are you ready?
9 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Supposing that the
App component is rendered into the #root element, how would the #root element look after the render if the App component is as follows:function App() {
return (
<h1>Hello World!</h1>
<p>This is a greeting message.</p>
);
}The code contains an error since it is returning a set of two elements without a container element. Hence, the correct choice is (C). For more info, refer to React Fragments: What are fragments?
Which of the following correctly describes fragments in React?
A fragment is basically a means of grouping multiple elements inside a container element. This aligns with the description given in choice (B). For more info, refer to React Fragments: What are fragments?
A fragment in React shows up in the DOM as a
<div> element. True or false?False. A fragment in React doesn't show up in the DOM; it's purely meant to act as a container element in React code. For more info, refer to React Fragments: What are fragments?
Which of the following components is used to create a fragment in React?
The
Fragment component is used to denote fragments in React. This goes with choice (A). For more info, refer to React Fragments: Creating fragments.What is the problem in the code below?
import React from 'react';
function App() {
return (
<React.Fragment>
<h1>A heading</h1>
<p>A paragraph</p>
</React.Fragment>
);
}The code shown above is absolutely fine. We aren't directly importing
Fragment from react but rather using the fully-qualified form, React.Fragment and that is completely OK. Hence, the correct choice is (C). For more info, refer to React Fragments: Creating fragments.What is the problem in the code below?
function App() {
return (
<>
<h1>A heading</h1>
<p>A paragraph</p>
</>
);
}There is absolutely no problem in the given code.
<>...</> is a concise way to denote a fragment in JSX, and there's no need to import anything from react in order to get it to work. For more info, refer to React Fragments: Creating fragments.A fragment in React can be provided with a
key prop. True or false?Yes, that's true. In fact, the
key prop is the only prop that can be provided to a fragment in React. For more info, refer to React Fragments: Using keys with fragments.A fragment in React can be given any prop. True or false?
Nope, that's false. The
key prop is the only prop that can be provided to a fragment in React. For more info, refer to React Fragments: Using keys with fragments.What is the problem in the code below?
function App() {
return (
<key={0}>
<h1>A heading</h1>
<p>A paragraph</p>
</>
);
}Although, it's valid to provide the
key prop to a fragment in React, this isn't the case when the fragment is denoted using the terse <>...</> syntax. The code above contains this very error in it. Hence, the correct choice is (C). For more info, refer to React Fragments: Using keys with fragments.
