React JSX Quiz

Test your React JSX understanding by taking this quiz

React Quiz #01 - React JSX Complete Guide

This article explains What is React JSX? How to use React JSX? with suitable examples

5 mins read

{/* This is a comment */}

// This is a comment

/* This is a comment */

 const name = "Alice";
 const element = <h1>Hello, {name}</h1>;

Hello, {name}

Hello, Alice

<h1>Hello, {name}</h1>

 const element = (
 <>
   <h1>{1 + 1}</h1>
   <p>{true ? "Yes" : "No"}</p>
   <p>{null}</p>
   <p>{undefined}</p>
 </>
 );

A fragment with an h1 element containing "2", a p element with "Yes" and two empty strings, respectively.

An error due to JSX rendering null and undefined.

A fragment with an h1 element containing “2” and three p elements with “Yes”, “null”, and “undefined”, respectively.

An error due to using the conditional operator in JSX.

It is used to sanitize HTML input and prevent XSS attacks.

It is used to set the inner HTML of an element.

It is used to bypass React’s XSS protection.

 const element = <input value="React" onChange={() => {}} />;

The input field will display “React” and the onChange event will trigger an empty function.

The input field will display “React” but the onChange event will not be triggered.

The input field will be empty and the onChange event will trigger an empty function.

The input field will be empty and the onChange event will not be triggered.

{condition ? <Component /> : null}

{condition && <Component />}

Both options are correct.

 const numbers = [1, 2, 3];
 const element = (
   <ul>
    {numbers.map((number) => (
     <li>{number}</li>
    ))}
   </ul>
 );

An unordered list with three list items: 1, 2, and 3.

An unordered list with a single list item: [object Object].

An error due to the missing key prop in the list items.

event.value

event.target.value

input.value

 const condition = false;
 const element = (
   <div>
    {condition ? <p>Condition is true</p> : <p>Condition is false</p>}
   </div>
 );

<div><p>Condition is true</p></div>

<div><p>Condition is false</p></div>

<div>Condition is true</div>

<div>Condition is false</div>

It is used to define the class name for a component.

It is used to add CSS styles to a component.

It is used to set the CSS class for an element.