ReactJS MCQ

Q.1 React is a _____ ?

ReactJS is a javascript library for building user interfaces. It's not a framework. A library is basically used to solve some common problems, we don't have to write code in Vanilla JS that is pure JS that could be somewhat challenging for people. That means, in order to build complete React applications, you will need to choose the packages and tools on your own. While Angular is usually considered a framework as it provides strong opinions on how your application should be structured.

Javascript library

Q.2 What are the advantages of using React?

1. React has reusable components: Code re-use helps make your apps easier to develop and easier to maintain. They also help you implement a consistent look and feel across the whole project.

2. React improves performance due to VDOM.

Q.3 Which terminal command is used to remove the directory?

mkdir

rmdir

rm

mv

Q.4 Write a command to move one level up from the current directory?

mv

cd

ls

pwd

Q.5 What is a React in a MVC architecture?

Controller

View

Middleware

Model

Q.6 Which command is used to print the current working directory?

cd

pwd

ls

None of Above

Q.7 Write command to move the directory one level up from the current directory.

cd..

cd ..

Q.8 React.js was orginally created by?

Paul O’Shannessy

Jordan Walke

Yuzhi Zheng

Sasha Aickin

Q.9 How is Real DOM different from Virtual DOM?

Manipulating the real DOM is slow. Manipulating the virtual DOM is much faster.

While trying to update DOM in React, entire real DOM gets updated but virtual DOM doesn't.

Virtual DOM is much slower than real DOM

A virtual DOM object is a representation of a DOM object, like a lightweight copy.

Q.10 Find the output of the code below:

for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000 ); }

012345

55555

12345

54321

Q.11 What will be the output of the following code?

let x = 42;
if (true) {
console.log(x);
let x = 1337;
}

42

1337

error

undefined

Q.12 Guess the Output:

const KEY = 'coding_ninjas';
if (true) {
const KEY = 'ES6';
}
console.log(KEY);

ES6

coding_ninjas

undefined

Q.13 Find the output:

var temp= 'hello';
function display(){
console.log(temp);
var temp = 'bye';
};
display();

bye

undefined

hello

null

Q.14 What is the final value of array below?

var array = [1, 2, 3]
const array1 = [4, 5, 6]
var arr1 = array.map(a => a * 2);

array = [...array1, ...arr1]

[1,2,3,4,5,6]

[4,5,6,2,4,6]

[4,5,6,1,2,3]

[2,4,6,4,5,6]

Q.15 Priority List

A student is creating a list of electronics items he wants to buy with decreasing priority(highest priority item at 0 index).

Electronics=['Mobile', 'Watch', 'Kindle'].

But due to college requirements, he wants to keep a certain item as his first priority. Can you add that item at the start to create a new priority list using the spread operator?

Q.16 What is the output of the following code?

function foo(x, ...y) {
return x * y.length
}
foo(4,1,2,30);

0

12

3

16

Q.17 Sum of N numbers

Write a program for printing the sum of given numbers.

Input: 1 2 3 4

Output: 10

Q.18 When we see "..." in the code, it is either rest parameters or the spread syntax. So, What is the difference between them?

The spread operator is used to transform an array into its individual elements whereas the rest parameters are used to transform individual elements into an array. Also, the spread operator is used when calling a function whereas the rest parameters are used in the function parameters. - When ... is at the end of function parameters, it’s “rest parameters” and gathers the rest of the list of arguments into an array. - When ... occurs in a function call or alike, it’s called a “spread syntax” and expands an array into a list.

Q.19 How does the arrow function differ from other functions?

Implicitly returns values

Can be used as a constructor

Is anonymous

Inherits the value of this from its enclosing scope

Q.20 This Keyword

var title = "A Passage to India";
var author = "E.M. Forster";
var novel = {
title: "Pride and Prejudice",
author: "Jane Austen",
print: function() {
console.log(this.title);
console.log(this.author);
}
}
novel.print();
What will be the output of the above program?
1. Uncaught ReferenceError: this is not defined Uncaught ReferenceError: this is not defined
2. A Passage to India E.M. Forster
3. Pride and Prejudice Jane Austen

2

3

1

4

Q.21 Student Grades

You have to filter all the students with marks greater than the given grades. Complete the given function and return the object.
const students = [
{ name: 'Anjali', grade: 96 },
{ name: 'Navdeep', grade: 84 },
{ name: 'Varun', grade: 100 },
{ name: 'Bhavya', grade: 65 },
{ name: 'Shiva', grade: 90 }
];

Q.22 map(), filter(), reduce()

Suppose you have given an array of numbers and you have to convert all the numbers into their perfect squares. Which of the following array functions are useful to accomplish this?

filter()

map()

reduce()

Q.23 Remove Duplicates

Remove duplicates from an array using reduce().
Input Format: Given an array as input
Output Format: Return the answer in the form of array after removing duplicates.
Sample Input:
a b c d a b b c d
Sample Output:
a b c d

Q.24 Array Destructuring and default value.

Choose the correct output.
const scores = [22, 33]
const [math, science = 50, arts = 50, sst] = scores
console.log(math,science,arts,sst);

22 50 50 undefined

22 33 50 undefined

22 33 undefined undefined

undefined 50 50 undefined

Q.25 Elisson and Array destructuring

const colors = [
'Red',
'Orange',
'Purple',
'Brown',
'Gray',
'Pink'
];
const [primary, ,secondary,...others] = colors;
console.log(primary, secondary, others);
What will be the output?

Red Orange ['Purple', ‘Brown’, ‘Gray’, ‘Pink’]

Red Purple [‘Brown’, ‘Gray’, ‘Pink’]

Red Orange [‘Brown’, ‘Gray’, ‘Pink’]

Purple Orange [‘Brown’, ‘Gray’, ‘Pink’]

Q.26 Object destructuring in Function Arguments

Which of the following options correctly represents the output of the following code?
function greet({ name, greeting='hello' }) {
console.log(`${greeting}, ${name}!`)
}
const person = { name: 'Aayushi', dept: 'tech', greeting: 'Welcome'};
greet(person);

Undefined, Aayushi

Welcome, Aayushi

Hello, Aayushi

Aayushi, Welcome

Q.27 Student Details

You are given an object which has details of a particular class. Complete the function so that it returns the details of the student at i th index in the form of an array.
Input Format: Given the index (i) of the student whose details should be printed.
Output Format: An array containing name and roll no of the student.
Sample Input:
1
Sample Output
Bhavya 2

Q.28 What does Babel do?

Bundles all your javascript files into one

Compiles JSX into Javascript

Runs react local development server

Both B and C

Q.29 What does the webpack do?

Runs react local development server.

A module bundler

Both of the above

None of the above

Q.30 At most, how many default import statements can a module have?

0

1

2

Mo limit

Q.31 Is JSX necessary to work with React?

True

False

Q.32 How do you call a function fetch() in JSX?

${fetch()}

{fetch()}

{fetch}

${fetch}

Q.33 Which of the following can be used to check if a user is logged in or not?

{if(loggedIn) {username} else 'Hello World'}

{loggedIn ? username : 'Hello World'}

{if(loggedIn)} ? {username} : 'Hello World'

Conditionals are not allowed in JSX

Q.34 Everything in react is a __________

module

component

package

class

Q.35 Choose the correct syntax for importing.

import GIVEN_NAME from ADDRESS

import { NAMED_PARA } from ADDRESS

import GIVEN_NAME, { NAMED_PARA, ... } from ADDRESS

import required {NAMED_PARA } from ADDRESS

Q.36 Which tool is used to take JSX and convert it into createElement calls?

JSX editor

Babel

Browser

ReactDOM

Q.37Which among the following package contains render() function that renders a react element tree to the DOM?

React

ReactDOM

Render

DOM

Q.38 What is the use of render() in React?

It renders a React element into the DOM in the supplied container and returns a reference to the component.

Q.39 How do you write an inline style specifying the font-size:10px and color:blue in JSX?

style={{font-size:10, color:'blue'}}

style={{fontSize:10, color:'blue'}}

style={{font-size:10px, color:'blue'}}

style={fontSize:10', color:'blue'}

Q.40 Which of the following is the correct syntax for adding a click event handler, foo, to a button?

onClick={this.foo()}

onClick={this.foo}

onclick={this.foo}

onclick={this.foo()}

Q.41 What is a state in React?

A state in React is used to store the property values that belong to a component. it enables a component to keep track of changes between renders

Q.42 Over the image

You are given a code to display an image on the page, you have to print “I’m on the image” in the console as soon as you move over the image. So which of the following is a correct event for that?
import React from "react"
function App() {
return (

onmouseover={()=> console.log("Over the Image")}

onMouseOver={()=> console.log("Over the Image")}

onMouseOver=()=> console.log("Over the Image")

onmouseover={()=> console.log("Over the Image")

Q.43 Find error/s in the given code:

import React from "react"
function App(){
constructor(){
this.state={
myName: “CN”
}
}
render(){
return (

It should be a class component instead of a functional component

Instead of {this.state.myName} in it should be {myName}

render() statement should not be there.

super() is missing from the constructor

Q.44 As soon as the state of react component gets changed, the component will

be re-rendered

be created again from scratch

do nothing , you have to call the render method to render the component again

None of above

Q.45 Find out what happens when the following render() method gets executed?

render(){
let code = ["Java","ES6","Ruby"]
return (

Displays Nothing

Displays the list of code in the array

Error. Cannot use direct JavaScript code in JSX

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

Q.46 What is the correct method to write an inline style specifying the background color: yellow and color:green; in JSX.

style={{background-color:'yellow',color:’green’}}

style={background-color:'yellow',color:’green’}

style={backgroundColor:'yellow',color:’green’}

style={{backgroundColor:'yellow',color:’green’}}

Q.47 What happens when you call setState() inside render() method?

Repetitive output appears on the screen

Stack overflow error

Duplicate key error

Nothing happens

Q.48 Predict the output of following code when the initial value of number is 1 in state, and user tries to invoke the following function on click of a button

handleClick = () => {
this.setState({ number: 2 }, () => console.log(this.state.number));
this.setState({ number: 3 }, () => console.log(this.state.number));
}

1 2

3 3

2 3

3

Q.49 Predict the value of this.state.number after the click listener is invoked once and the initial value of number is 1 in state

handleClick = () => {
this.setState(
prevState => {
return {
number: prevState.number + 2
};
}
);
this.setState(
prevState => {
return {
number: prevState.number + 3
};
}
);
};

3

6

4

1

Q.50 The state in react can be updated by call to setState method. These calls are

Synchronous in nature

Asynchronous in nature

Are asynchronous but can be made synchronous when required

None of above

Q.51 Why we should not update the state directly and use setState?

Directly updating the state will give you error.

It won’t re render the component.

It will not change the state.

It goes into infinite loop

Q.52 What is the purpose of using callbacks in setState?

The callback function is invoked when setState is finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.

Q.53 Keys are given to elements in a list in React. These keys are

unique in the DOM

unique among the siblings only

not required

None of above

Q.54 props in react can _____

be changed inside the component

not be changed in the component

be changed using this.setProps

None of above

Q.55 Which of the following statements is correct about props?

Props are used to pass information from one component to another.

Anything can be passed as a prop in React including event handlers

React props can be accessed as an object or destructured

Props cannot be directly updated.

Q.56 What are two ways data gets handled in react?

State & Component

State & Props

Components & Functions

Props & Components

Q.57 Which of the following statements is/are incorrect about Props and States?

We cannot use state for defining default values in a component.

States can be modified by using setState() and props can be modified using setProps()

Props are immutable and States are mutable.

States can only be defined in the component itself.

Q.58 Which of the below is the correct syntax to access a property inside the props in a class components?

this.name

this.props.name

this.props

props.name

Q.59 Which of the below is the correct syntax to access a property inside the props in a functional components?

this.props.name

props.name

this.name

this.props

Q.60 The _____ function creates an array of filtered data that pass a condition.

filter()

filter

Q.61 Why are arrow functions preferred in react?

Clean syntax and less code

Scope safety

Difficult to implement

To avoid binding `this` to methods

Q.62 What is the declarative way to render a dynamic list of components based on values in an array.

Using the reduce array method

Using the Array.map() method

Using the component

With a for/while loop

Q.63 What will be the output of the following code?

const cartItem = {
itemName: 'Apples',
qty: 6,
price: 10
};
const { qty=1, price } = cartItem;
console.log("Total price of", cartItem.itemName , 'is', qty*price);

Total price of Apples is 60

Q.64 How can we pass the information from a component to another component which is not a direct parent, child or sibling?

Local Storage

props

state

Redux

Q.65 Which method in a React Component should you override to stop the component from updating?

willComponentUpdate

shouldComponentUpdate

componentDidUpdate

componentDidMount

Q.66 Consider you have a component which has a setTimeout() invoked inside of it, but the component can be removed even if it hasn’t completed yet. Which method should we override to stop the timer if and when the component is removed?

shouldComponentUpdate

componentWillUnmount

componentWillMount

componentDidMount

Q.67 What arguments are passed into the shouldComponentUpdate() method?

The next props

The current props

The next state

The current state

Q.68 Which of the following is true?

Document within same collection should have same field

A Document can contain another Collection

A Collection can contain another Collection

Names of Documents within a collection can be same

Q.69 In which lifecycle method should you unsubscribe from your real time updates listener?

componentDidUnmount

componentWillUnmount

shouldComponentUnmount

componentDidCatch

Q.70 Which of the following method is used to delete a field from a particular document.

db.collection(‘cities’).doc(‘delhi’).delete(‘capital’)

docRef.update({ capital: firebase.firestore.FieldValue.delete() });

docRef.delete(‘capital’)

docRef.delete({ capital:firebase.firestore.delete() }

Q.71 Firebase query

SF, LA,DC

DC

SF

LA

Q.72 Which of the following is valid in firebase?

citiesRef.where("state", ">=", "CA").where("population", ">", 100000);

citiesRef.where("state", "==", "CA").where("population", ">", 1000000);

studentsRef.where("age", "!=", "30")

Q.73 How to get the reference of a single document from firebase?

firebase.firestore().doc(documentID)

firebase.firestore().collection(collectionName).doc(documentID)

firebase.collection(collectionName).doc(documentID)

firebase.firestore().collection(collectionName).get().then((documentID) => {})

Q.74 firebase.firestore().collection(collectionName).get().then((documentID) => {})

firebase.collection().get()

firebase.firestore().get()

firebase.firestore().collection().get()

firebase.firestore().collection(‘all’).get()

Q.75 Which hook is analogous to react’s class lifecycle method componentDidMount?

useEffect( ( ) => { })

useEffect( ( ) => { }, [ ] )

useEffect( ( ) => { }, { } )

useEffect( ( ) => { }, null )

Q.76 What’s wrong with the code

Class Button {

render () {
const [text, setText] = useState(‘’);
return {text}
}
}

Can’t use hook inside the render function

Can’t use hooks inside a class

All is good, it will work

Have to wrap with a div

Q.77 Can we use the same hook multiple times in a function?

False

True

Q.79 Which command is correct for creating a react project?

npx create react-app foldername

npx create-react-app foldername

npm create-react-app foldername

npm create react-app foldername

Q.80 Which of the following is the correct syntax for importing BrowserRouter from “react-router-dom” ?

import {BrowserRouter} from react-router-dom

import {BrowserRouter} from “react-router-dom”

import BrowserRouter from react-router-dom

import “BrowserRouter” from “react-router-dom”

Q.81 Which of the following syntax is correct for exporting more than one component?

export “App, Navbar, Home, CreatePost, PostDetail”;

export {App, Navbar, Home, CreatePost, PostDetail};

export {App}, {Navbar}, {Home}, {CreatePost}, {PostDetail};

export App, Navbar, Home, CreatePost, PostDetail;

Q.82 _________ Provides declarative, accessible navigation around your application.

Switch

Router

Link

Route

Q.83 The ________________ method is used to prevent the browser from executing the default action of the selected element.

stopDefault()

preventDefault()

preventEvent()

stopEvent()

Q.84 custom hooks improves the readability and a reduces the amount of code.

False

True

Q.85 Firebase is a

Relational Database

NoSQL Database

Realtime Database

Cloud-Hosted Database

Q.86 ____________ function is used to fetch data from the firebase. Document.

onFailureListener()

onSnapshot()

onUpdate()

onSuccessListener()

Q.87 _________ hooks let you access the parameters of the current route.

useCallback

useParams

useContext

useRef

Q.88 Which command is used for deploying a firebase-hosted application?

firebase build

firebase deploy

firebase init

firebase start

Q.89 CSS modules _______

apply to all the components

apply to the component where imported

apply to 2 components

apply to only nested components

Q.90 How to style an anchor tag using styled components

styled.anchor`color: white`

styled.a`color: white`

styled.`color: white`