Tech Quiz

Why is it a good idea to pass a function to setState instead of an object?

• It provides better encapsulation

• It makes sure the object is not mutated

• It is asynchronous and might result in out of sync values

• It automatically updates a component

Which of these terms commonly describes reactjs applications?

• Integrated

• Declarative

• Imperative

• Closed

Currently, handle click is being called instead of passed as a reference. How do you fix this?

<button onClick={this.handleClick()}>Click this </button>

• <button onClick={this.handleClick.bind(handleClick)}>Click this </button>

• <button onClick={handleClick()}>Click this</button>

• <button onclick={this.handleClick}>Click this</button>

• <button onClick={this.handleClick}>Click this </button>

Fix the Syntax error that results from running this code?

const person = (firstName, lastName) => 

{

first: firstName,

last: lastName

}

console.log(person(“Jill”, “Wilson”));

• Call the function from another file.

• Add a return statement before the first curly brace.

• Replace the object with an array.

• Wrap the object in parentheses.

How do you invoke setDone only when component mounts, using hooks?

Function MyComponent(props) {

const [done, setDone] = useState(false);

Return <he>Done: {done}</h>;

}

• useEffect(() => { setDone(true); }, []);

• useEffect(() => { setDone(true); });

• useEffect(() => {setDone(true); }, [setDone]);

• useEffect(() => {setDone(true); }, [done, setDone]);

Which of the following syntax is correct for applying multiple filters in AngularJS?

• {{ expression | {filter1} | {filter2} | … }}

• {{ expression – {filter1} – {filter2} – … }}

• {{ {filter1} | {filter2} | …-expression}}

• {{ expression | filter1 | filter2 | … }}

Predict the output of the following code snippet

function foo(input: boolean) {

    let one = 1200;

    if (input) {

        let ans = one + 1;

    }

    return ans;

}

• Runtime error

• Compilation Error

• Undefined

• 1201

Which of the following is the correct form control class name that is set to true via [(ngModel)] whenever value is changed?

• .ng-pristine

• .ng-pending

• .ng-dirty

• .ng-invalid

Write a statement with <div> element to initialize two variables (name and age)?

• <div ng-app="" ng-init="Name:'Alex',Age:21">

• <div ng-app="" ng-init="Name='Alex',Age=21">

• <div ng-app="" ng-init="Name:'Alex',Age:21">

• <div ng-app="" ng-init="Name:'Alex';Age:21">

In this template syntax, every time the items property is changed (added to, removed from, etc.), the ngFor structural directive re-runs its logic for all DOM elements in the loop. What syntax can be used to make this more performant?

<div *ngFor="let item of items">

  {{ item.id }} - {{ item.name }}

</div>

• *ngFor="let item of items; trackBy: trackById"

• *ngFor="let item of items: let i = index"

• *ngFor="let item of items.distinct()"

• *ngFor="let item of items; let uniqueItem"