React Quiz on JSX #01: React JSX complete guide

Check out the interactive React JSX quiz @ https://quizzesforyou.com/quiz/reactjsx

JSX Quick Refresher:

1. JSX Syntax: JSX — JavaScript XML is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It provides a concise and familiar syntax for creating React elements. Here’s an example:

    const element = <h1>Hello, JSX!</h1>;

2. Rendering JSX Elements: JSX elements can be rendered by using them within the ReactDOM.render() method. Here's an example:

    const element = <h1>Hello, JSX!</h1>;
    ReactDOM.render(element, document.getElementById('root'));

3. Embedding Expressions: JSX allows you to embed JavaScript expressions within curly braces {}. This allows you to dynamically generate content. Here's an example:

    const name = 'John Doe';
    const element = <h1>Hello, {name}</h1>;

4. Using CSS Classes: To add CSS classes to JSX elements, the className attribute can be used which is equivalent to the class attribute in HTML. Here's an example:

    const element = <div className="container">Hello, JSX!</div>;

5. Conditional Rendering: JSX elements can be conditionally rendered using JavaScript expressions. Here’s an example using the ternary operator:

const isLoggedIn = true; 
const element = isLoggedIn ? Welcome, user! : Please log in.

6. Mapping over Arrays: map() function can be used to dynamically render JSX elements based on the contents of an array. Here's an example:

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

7. Handling Events: JSX allows to define event handlers using the onEventName attribute. Here's an example of handling a button-click event:

function handleClick() { console.log('Button clicked!'); }

8. Fragment: Multiple elements can be rendered without a parent wrapper using a React Fragment. It helps avoid unnecessary div nesting. Here’s an example:

const element = (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);

Check out the interactive quiz @ https://quizzesforyou.com/quiz/reactjsx

1. Which is the correct way to add comments in JSX?

a) { This is a comment /}

b) // This is a comment

c) / This is a comment */

Answer: a) {/* This is a comment */}

In JSX, comments are written inside curly braces {} and wrapped with opening and closing curly braces.

2. What will be the output of this JSX code?

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

a) Hello, {name}

b) Hello, Alice

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

d) Error

Answer: b) Hello, Alice The JSX code uses curly braces {} to embed the value of the name variable within the JSX element.

3. What will be the output of this JSX?

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

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

b) An error due to JSX rendering null and undefined.

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

d) An error due to using the conditional operator in JSX.

Answer: a) A fragment with an h1 element containing “2”, a p element with “Yes” and two empty strings, respectively.

The JSX code evaluates expressions within curly braces {}. The arithmetic expression is evaluated to “2”, the ternary operator evaluates to “Yes” since it’s true, and null and undefined are rendered as empty strings.

4. What is the purpose of the “dangerouslySetInnerHTML” prop in React JSX?

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

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

c) It is used to bypass React’s XSS protection.

Answer: b) It is used to set the inner HTML of an element.

The “dangerouslySetInnerHTML” prop is used when you want to set the inner HTML of an element directly. It should be used with caution, as it can potentially expose your application to cross-site scripting (XSS) attacks.

5. What will be the output of this JSX?

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

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

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

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

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

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

The JSX code sets the value prop of the input element to “React” and attaches an empty onChange event handler.

6. What is the correct way to conditionally render elements in JSX?

a) {condition ? <Component /> : null}

b) {condition && <Component />}

c) Both options are correct.

Answer: c) Both options are correct.

Both options are valid ways to conditionally render elements in JSX. Option a) uses the ternary operator, and option b) uses the logical AND operator.

7. What will be the output of this JSX?

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

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

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

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

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

The JSX code maps over the numbers array and creates a list item for each element, without using a key prop and a related warning would appear on the console.

8. How do you access the value of an input field in React JSX?

a) event.value

b) event.target.value

c) input.value

Answer: b) event.target.value

In React JSX, you can access the value of an input field through the “event” object using “event.target.value”.

9. What will be the JSX bases on the “condition”?

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

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

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

c) <div>Condition is true</div>

d) <div>Condition is false</div>

Answer:

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

10. What is the purpose of the “className” prop in React JSX?

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

b) It is used to add CSS styles to a component.

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

Answer: c) It is used to set the CSS class for an element.

Visit https://quizzesforyou.com for more such quizzes