ReactJS Quiz Set – 4

Question 1

React is mainly used for building ___.

Cross

Database

Cross

Connectivity

Tick

User interface

Cross

Design Platform



Question 1-Explanation: 

React is a view-only library and helps to design User Interfaces

Question 2

The lifecycle methods are mainly used for ___.

Cross

keeping track of event history

Cross

enhancing components

Cross

freeing up resources

Tick

none of the above



Question 2-Explanation: 

The lifecycle methods are used to operate on the components throughout their duration.

Question 3

___ can be done while multiple elements need to be returned from a component

Cross

Abstraction

Cross

Packing

Cross

Insulation

Tick

Wrapping



Question 3-Explanation: 

Wrapping ensures a single HTML element is returned from the component as React requires only single component.

Question 4

Which is the right way of accessing a function fetch() from an h1 element in JSX?

Tick

<h1>{fetch()}</h1>

Cross

<h1>${fetch()}</h1>

Cross

<h1>{fetch}</h1>

Cross

<h1>${fetch}</h1>



Question 4-Explanation: 

fetch is a JavaScript function to call it we need to use the JSX syntax, which is specified in the first option.

Question 5

Which of the following methods in a React Component should be overridden to stop the component from updating?

Cross

willComponentUpdate

Tick

shouldComponentUpdate

Cross

componentDidUpdate

Cross

componentDidMount



Question 5-Explanation: 

shouldComponentUpdate is a lifecycle method and it is used to exit the component which stops it from updating again and again.

Question 6

What is used to pass data to a component from outside?

Cross

setState

Cross

render with arguments

 

Cross

PropTypes

Tick

props



Question 6-Explanation: 

props are a built-in feature of react to pass data to any component from other components.

Question 7

Which of the following methods in a React Component is called after the component is rendered for the first time?

Cross

componentDidUpdate

Tick

componentDidMount

Cross

componentMounted
 

Cross

componentUpdated



Question 7-Explanation: 

componentDidMount lifecycle method executes the component once it is added to the DOM.

Question 8

Which of the following is the correct syntax for a button click event handler foo?

Cross

<button onclick={this.foo()}>


 

Cross

<button onclick={this.foo}>

Tick

<button onClick={this.foo()}>

Cross

<button onClick={this.foo}>



Question 8-Explanation: 

The onClick syntax is modified in JSX and the function is passed inside the JSX syntax.

Question 9

What will happen if you call setState() inside render() method?

Cross

Repetitive output appears on the screen

 

Cross

Duplicate key error

Cross


Stack overflow error

Tick

Nothing happens



Question 9-Explanation: 

Though setState() inside render() method does not produce any errors but it can cause infinite loops.

Question 10

What will happen if the following render() method executes?
render(){
let langs = ["Ruby","ES6","Scala"]
return <div>{langs.map(it => <p>{it}</p>)}</div>
}

Tick

Displays the list of languages in the array

Cross

Error. Cannot use direct JavaScript code in JSX

 

Cross

Displays nothing

Cross

Error. Should be replaced with a for..loop for correct output



Question 10-Explanation: 

It is a simple class-based component where JSX syntax is used to iterate over the array and display it.

There are 15 questions to complete.

  • Last Updated : 27 Sep, 2023

Share your thoughts in the comments
Similar Reads