In this article i am gone to share Coursera Course: Front-End Developer Capstone by Meta Week 3 | Module Quiz: Project Functionality Quiz Answers with you..

Also visit: Module Quiz: Project Foundations Quiz Answers

Module Quiz: Project Functionality Quiz Answers

Question 1)
You are implementing a stateful component in your React project which will display the number of people living in your town. Which of the following React hooks should be used to update the state of the component?

• setEffect()
• useState()
• useEffect()
• setState()

Question 2)
Which type of destructuring is used when destructuring the useState hook?

• Map destructuring
• Array destructuring
• Object destructuring
• JSON destructuring

Question 3)
What is the type of data which is passed from a parent component to a child component?

• mutable data
• state data
• props data
• variable data

Question 4)
True or False: The preventDefault() method in React stops the default behavior of a new web page opening when a form is submitted.

• True
• False

Question 5)
Which React hook must be utilized when calling an API using the fetch() method?

• useState
• useEffect
• useReducer

Question 6)
What will be output if the following HTTP request fails?

fetch(‘https://example.com/api/data’)
.then(response => console.log(“Success”));

• Nothing will be output.
• Fail
• Success

Question 7)
Which one of the following is a valid command for running your unit tests?

• run test
• test npm
• react test
• npm run test

Question 8)
Which type of form validation occurs after the user has pressed on the submit button?

• Client-side form validation
• Ad-hoc form validation
• Server-side form validation

Question 9)
Which one of the four core principles of accessibility upon which WCAG (Web Content Accessibility Guidelines) has been built does the following describe? “Every feature of the website’s functionality must be accessible to all users, including page navigation, link selection from a menu and the ability to play and pause audio and video.”

• Robust
• Operable
• Perceivable
• Understandable

Question 10)
When importing the useState hook the common practice is to use object destructuring. If object destructuring was not used, and all we had was the code snippet below, how could the useState hook still be used?

import React from “react”;

• React.useState
• It could not be used
• useState
• React.get(useState)

---

 

Question 11)
What is the purpose of useState in the following code?

import { useState, useEffect } from "react"; 
function Example() { 
const [count, setCount] = useState(0); 
useEffect(() => { 
document.title = `You clicked ${count} times`; }); 
return ( <div> {" "} 
<p>You clicked {count} times</p> 
{" "} 
<button onClick={() => setCount(count + 1)}> 
Click me </button>{" "} </div> ); }

• useState is used to set the initial state of the component.
• useState is used to define the component’s render method.
• useState is not used.
• useState is used to add state and side effects to a functional component.

 

Question 12)
Which one of the following statements is true about the useState hook?

• To continuously update the state, arguments must be passed to the useState hook.
• The pair of values returned by useState must be given strict names defined somewhere in your code.
• The pair of values returned by useState can be given any name.
• The initial state of a component should always be defined as useState(0).

Question 13)
How many major elements are outlined by the WCAG (Web Content Accessibility Guidelines) for designing accessible websites?

• five
• three
• four
• six

Question 14)
Why do you use the useEffect hook in a react project? Select all that apply.

• To trigger an effect only when the component mounts.
• To update the component’s state.
• To clean up effects before the component unmounts or re-renders.
• To perform side effects after a component renders.
• To trigger an effect when a prop changes.

Question 15)
When building an app locally you may want to mock the JSON data returned from an API call for testing purposes. Which one of the following would be the most appropriate way to do this?

• Use a .json file for the mocked data.
• Use a .xml file for the mocked data.
• Use a .txt file for the mocked data.

Question 16)
Which one of the following code snippets correctly calls an API using fetch()?

• fetch(‘https://example.com/api/data’).then(response => console.log(response));
• fetch(‘https://example.com/api/data’)
  .promise(response => console.log(response));
• fetch(https://example.com/api/data).then(response => console.log(response));

Question 17)
What one of the following is a benefit of unit testing in React?

• It helps ensure that individual components work as expected.
• It guarantees that the application will have no bugs.
• It speeds up the development process.
• It ensures that the whole React app is working end to end.

Question 18)
Which type of form validation provides an immediate response to the user, usually as a validation message next to the form field?

• Ad-hoc form validation
• Client-side form validation
• Server-side form validation

Question 19)
Which of the following code snippets will set the initial state of a component to contain two people, one with brown hair and brown eyes and the other with blond hair and blue eyes?

• const [person, usePerson] = setState([
  { hairColor: “brown”, eyeColor: “brown” },
  { hairColor: “blond”, eyeColor: “blue” }
  ]);
• const [person, setPerson] = useState([
  { hairColor: “brown”, eyeColor: “brown” },
  { hairColor: “blond”, eyeColor: “blue” }
  ]);
• const [person, setPerson] = useEffect([
  { hairColor: “brown”, eyeColor: “brown” },
  { hairColor: “blond”, eyeColor: “blue” }
  ]);
• const {person, setPerson} = useState([
  { hairColor: “brown”, eyeColor: “brown” },
  { hairColor: “blond”, eyeColor: “blue” }
  ]);

Question 20)
True or False: Form elements keep their own state in regular HTML.

• True
• False

Question 21)
Which one of the following is a common use of JSON in a React project?

• To store large amounts of data.
• To send data to a REST API.
• To display an error message to the user.

Question 22)
Which data transfer format is most commonly used with APIs?

• Text
• JSON
• XML

Question 23)
Of the four major elements outlined by the WCAG (Web Content Accessibility Guidelines), which one is mostly concerned with providing features such as screen readers and synthesized speech?

• Operable
• Robust
• Perceivable
• Understandable

Question 24)
Which type of destructuring is being used in the following code snippet?

import React, { useState } from “react”;

• import destructuring
• json destructuring
• array destructuring
• object destructuring

• useState is more performant.
• There is no benefit.
• useReducer is more performant.

• True
• False

• test(“Validate title”, () => 
• {  render(<App />);    
• const actualTitle = screen.getByTestId(“pageTitle”);   
• const expectedTitle = “My Web Page”;   
• expect(actualTitle).toBe(expectedTitle);});

• True
• False
• Only in some cases.
• Only in certain types of state.