React Fragments Quiz

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?

<div id="root">
   <h1>Hello World!</h1>
   <p>This is a greeting message.</p>
</div>

<div id="root">
   <div>
      <h1>Hello World!</h1>
      <p>This is a greeting message.</p>
   </div>
</div>

The code contains an error

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 is a means of running side effect code. A fragment is a means of wrapping up a set of elements with a container element. A fragment is a means of injecting a DocumentFragment instance into the DOM.

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?

True False

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.

Fragment Document.Fragment ReactFragment BasicFragment ElementFragment

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.

There is no such thing as React.Fragment There is no id prop present on the <React.Fragment> element There is no problem in the code

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.

We aren't importing Fragment from react We can't have empty tags (<> and </>) There is no problem in the code

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.

True False

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.

True False

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.

A key prop can't be assigned to a fragment A fragment's key prop can't be a number When using the terse <>...</> syntax, we can't use a key prop on a fragment There is no problem in the code

Are you ready?

More courses

HTML

CSS