Prac quiz on React.js

1. What will the following JSX code snippet render if isLoggedIn is "Hello"?

• <p>Welcome, User!</p>

  
  

• <p>Hello, User!</p>

  
  

• Error

  
  

• Nothing

  
  

1. How do you render a list of items stored in an array called items in React.js?

• [items.map(item => <Item>[item]</item>)]

  
  

• [items.map(items => <Item key=[item.id]>[item.name]</item>)]

  
  

• {items.map(item => <Item key={item.id}>{item.name}</Item>)}

  
  

• <[DemList]>[items]</ItemList>

  
  

It is a special attribute you should include when mapping over arrays to render data.

index

• id

• props

• key

The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.

• True

• False

What is the purpose of using keys when conditionally rendering a list of components in React?

• To determine the order of rendering

  
  

• To improve performance

• To apply conditional styling to components

  
  

• To apply conditional styling to components

  
  

Which of the following correctly demonstrates array destructuring?

• {a,b}={1,2}

• [a,b]={1,2}

• [a,b]=[1,2,3]

• {a,b}=[1,2,3]

  
  

What is the output of the following code?

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5];

console.log(arr2.length);

• 5

• 3

• 4

• 2

You can use either if statements or ternary expressions which are available from JS to conditionally render expressions.

• True

• False

const divStyle = { ______ "blue", backgroundImage: "url(" + imageUrl + ")" };

function HelloWorldComponent() {
______ < ___ ____ = {divStyle} > Hello World! </div>