Data and State

COURSE 5 – REACT BASICS QUIZ ANSWERS

Week 2: Data and State

Meta Front-End Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

Data and State INTRODUCTION

Data and State-management are two critical concepts for any Meta Front-End Developer Professional Certificate student to understand. In this module, you will master the fundamentals of Data and State-Management through a comprehensive exploration of its fundamentals. This includes understanding the difference between state and data, how they interact with each other, and how to handle events that can dynamically change content on a web page.

At the end of this module, you will have an enhanced understanding of Data and State Management, enabling you to take your skills beyond what Coursera has to offer.

Learning Objectives

  • Detail the concept and nature of state and state change
  • Use common methods to manage state in React
  • Describe the hierarchical flow of data in React
  • Describe how data flows in both stateful and stateless components
  • Use an event to dynamically change content on a web page
  • Describe some common errors associated with events and the syntax required to handle them

KNOWLEDGE CHECK: EVENTS AND ERRORS

1. When handling a click event in react, you should use the following attribute:

  • onClick (CORRECT)
  • Onclick 
  • on-click 
  • OnClick

Correct: Correct! The attribute is the same as in vanilla JavaScript, except for the capital C letter.

2. Inside a JSX element, you can assign a JSX expression to the onClick handler to handle a click in React.

  • False
  • True (CORRECT)

Correct: That’s correct! In fact, you have to do it. 

3. You can place an opening and a closing parenthesis after the name of the event-handling function that you assign to the onClick attribute.

  • True 
  • False (CORRECT)

Correct: That’s correct! Contrary to plain JavaScript, you cannot invoke an event-handling function to handle an event such as the onClick. That’s one of the differences between JSX and plain JavaScript syntax.

4. The try…catch syntax can be used in React in certain cases.

  • True (CORRECT)
  • False

Correct: That’s right! You can handle event-handling errors using the try…catch syntax. 

5. Choose the valid example of an onclick event handler.

  • <button on-click=”handleClick”>Click me</button> 
  • <button onClick={handleClick()}>Click me</button> 
  • <button onClick={handleClick}>Click me</button> (CORRECT)
  • <button onclick={handleClick}>Click me</button> 

Correct: That’s correct. This code will handle click events on the button by invoking the handleClick function.

SELF REVIEW: DYNAMIC EVENTS

1. In React, you are not allowed to code a separate function that should be run to handle a click event.

  • True 
  • False (CORRECT)

Correct: Passing the function name such as “clickHandler” to the onClick handler, and wrapping it in a JSX expression, then coding a clickHandler function declaration, is a common way of handling a click event in React.

2. Event-handling attributes in React are named almost the same as in HTML. Syntactically, the only difference is in the capitalization.

  • True (CORRECT)
  • False

Correct: That’s right. Syntactically, the only difference is that HTML attributes are all lowercased, while React attributes are camelCased.

3. W​hat’s wrong with this code?

<button onClick={handleClick()}>
  Click me
</button>
  • You cannot invoke an event-handling function from a JSX expression. (CORRECT)
  • T​his code should work.
  • The event-handling attribute should be all lowercased.

Correct: C​orrect. This code would not work. The code that would work would need to be as follows: onClick={handleClick}.

KNOWLEDGE CHECK: DYNAMIC EVENTS AND HOW TO HANDLE THEM

1. What code should be added to the element button to make this code snippet valid?

function App() {
 
  function handleClick() {
    console.log("clicked")
  }
 
  return (
    <div className="App">
      <button >Click me</button>
    </div>
  );
}
  • click=handleClick
  • onClick={handleClick} (CORRECT)
  • onClick={handleClick()} 

Correct: Correct. This is the correct syntax.

2. Imagine that you have a variable named userLoggedIn and it’s set to the boolean of true. How would you complete the below clickHandler function declaration to toggle the value of the userLoggedIn boolean?

function clickHandler() {
}
  • userLoggedIn = !userLoggedIn (CORRECT)
  • userLoggedIn = true
  • userLoggedIn = false

Correct: That’s correct! This will toggle the boolean value from true to false, and from false to true.

3. Is a click handler on its own enough to change the values of variables in your React apps?

  • No (CORRECT)
  • Yes 

Correct: That’s correct! You need to also use something known as “hooks”.

4. What are the ways to write an event-handling function in React. Select all that apply.

  • With an inline anonymous ES5 function (CORRECT)
  • Using a separate function expression (CORRECT)
  • Using a separate function declaration (CORRECT)
  • With an inline, anonymous ES6 function (an arrow function) (CORRECT)

Correct: That’s right! An inline anonymous ES5 function is a valid way to handle an event in React.
Correct: That’s right! A separate function expression is a valid way to handle an event in React. 
Correct: That’s right! A separate function declaration is a valid way to handle an event in React.
Correct: That’s right! An inline anonymous ES6 function (an arrow function) is a valid way to handle an event in React.

5. Choose the appropriate code on line 3 of the following component – to handle a click event.

function App() {
 
  function () {
    console.log("clicked")
  }
 
  return (
    <div className="App">
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
  • function handleClick() { (CORRECT)
  • function HandleClick() {
  • function handleClick {

Correct: That’s correct. This return statement will show the Example component on the screen.

KNOWLEDGE CHECK: DATA FLOW

1. Usually, a React app consists of many components, organized as a component tree.

  • True (CORRECT)
  • False

Correct: That’s correct, a React app is organized as a tree of components.

2. Uni-directional data flow is…

  • The term that describes the one-way flow of components in a React app 
  • The term that describes the one-way flow of data in a React app. (CORRECT)
  • The term that describes the one-way flow of DOM updates in a React app 

Correct: Correct. Uni-directional flow of data is synonymous with one-way data flow.

3. A component can, at any given time_______. Select all that apply.

  • Pass data as props and receive data as props at the same time (CORRECT)
  • Pass data as props (CORRECT)
  • Receive data as props (CORRECT)

Correct: That’s right. You can pass data as props and receive data as props at the same time.
Correct: That’s right. You can pass data as props.
Correct: That’s right. You can receive data as props.

4. You can only pass a single prop to a component.

  • True 
  • False (CORRECT)

Correct: You can pass more than a single prop.

5. The props parameter is:

  • A boolean 
  • An object (CORRECT)
  • A string 
  • An array 

Correct: The props parameter is an object.

6. Consider the following piece of code:

function MyMenu() {  
  return (  
    <div>  
      <Appetizers />  
    </div>  
  )  
}

Which element of this code represents a child component?

  • return
  • MyMenu()
  • <Appetizers /> (CORRECT)
  • <div>

Correct: That’s right! <Appetizers /> is the name of the child component. In this case, it is defined in a separate file.

KNOWLEDGE CHECK: STATE THE CONCEPT

1. In React, can state be considered data?

  • Yes (CORRECT)
  • No

Correct: Correct. In React, an app’s data can be expressed as state. 

2. In React, can props be considered data?

  • Yes (CORRECT)
  • No

Correct: Correct. In React, an app’s data can be expressed as props. 

3. Choose the correct statement.

  • The props object represents data that is internal to a component, and state represents data that is external to a component. 
  • The props object represents data that is external to a component, and state represents data that is internal to a component. (CORRECT)

Correct: That’s correct! The props data is controlled outside of a component, and the state data is controlled by the component itself.

4. What does the useState hook do?

  • It allows a component to receive state from its parent. 
  • It allows a component to have its own state. (CORRECT)

Correct: That’s right! The useState hook allows a component to have its own state.

5. Based on the code below, is the userName variable external or internal data of the DisplayUser component?

function DisplayUser(props) {
  return (
    <h1>{props.userName}</h1>
  );
}
  • The userName value is data that is external to the DisplayUser component (CORRECT)
  • The userName value is data that is internal to the DisplayUser component

Correct: That’s correct. The userName value comes from the parent component, and thus is not controlled by the DisplayUser component.

KNOWLEDGE CHECK: PASSING STATE

1. What is the Context API?

  • An alternative way to working with state in React. (CORRECT)
  • A way to change the execution context of a function in JavaScript.

Correct: Correct. Context API is used to work with state from a global store in react. 

2. When working with useState to keep state in a variable, you should not use array destructuring.

  • True
  • False (CORRECT)

Correct: Correct. You should always use array destructuring when working with useState. !

3. If a state variable is destructured from useState, and set to variable name of user, the name of the function to update the user state variable should be…

  • SetUser (CORRECT)
  • useState 
  • userSetter 
  • useUser

Correct: That’s correct! The convention is to name the state-setting function using the word “set” plus whatever the name of the state variable is, all written in camelCase.

4. What does the concept of “lifting up state” entail?

  • It involves moving the state from the parent component to the child component.
  • It involves moving the state from the child component to the parent component. (CORRECT)

Correct: That’s right! Lifting up state means moving state up from a child to the parent component.

5. What is a negative result of lifting up state in a React app?

  • Prop drilling. (CORRECT)
  • There are no negatives from lifting up state in React.
  • It can significantly increase the number of components that you need to create.

Correct: That’s correct. Lifting up state can sometimes lead to prop drilling, which lowers maintainability and modularity of a React app.

SELF REVIEW: MANAGING STATE IN REACT

1. T​rue or false? When lifting state up, you need to move the useState from a child component to a parent component.

  • T​rue (CORRECT)
  • F​alse.

Correct: C​orrect. When lifting state up, you need to move the useState from a child component to a parent component.

2. If the state variable holds an array or a string value, once you pass that state via props from a parent to a child, you can then read the length property from the received prop in the child component.

  • T​rue (CORRECT)
  • F​alse

Correct: C​orrect. If the state variable holds an array or a string value, once you pass that state via props from a parent to a child, you can then read the length property from the received prop in the child component.

3. W​hat’s wrong with this code?

import React from "react";
import Fruits from "./Fruits";
import FruitsCounter from "./FruitsCounter";
 
function App() {
  const [fruits] = useState([
      {fruitName: 'apple', id: 1},
      {fruitName: 'apple', id: 2},
      {fruitName: 'plum', id: 3},
  ]);
 
  return (
    <div className="App">
      <h1>Where should the state go?</h1>
      <Fruits fruits={fruits} />
      <FruitsCounter fruits={fruits} />
    </div>
  );
}
 
export default App;
  • If you don’t add the setFruits state-updating function when descructuring values from useState, the app won’t compile.
  • T​here’s nothing wrong with the provided code.
  • T​he useState call should be React.useState. (CORRECT)

Correct: C​orrect. In the context of the give code snippet, you need to access the useState hook using the React.useState syntax.

KNOWLEDGE CHECK: STATE OR STATELESS

1. What is a stateless component?

  • A component that doesn’t track its own state. (CORRECT)
  • A component that doesn’t track its parent’s state.

Correct: Correct. A stateless component doesn’t track its own state. 

2. A stateful component must have a props object.

  • False (CORRECT)
  • True

Correct: Correct. Whether or not a stateful component has a props object is irrelevant. 

3. To turn a stateless component into a stateful component, you must pass it a props object.

  • True
  • False (CORRECT)

Correct: Correct. Whether or not a stateful component receives a props object is irrelevant. 

4. The process of lifting up state can lead to: Select all that apply.

  • A stateful child component controlling the state of a stateful parent component.
  • A stateful child component controlling the state of a stateless parent component.
  • A stateless component becoming a stateful component. (CORRECT)
  • A stateful component becoming a stateless component. (CORRECT)

Correct: That’s right! Lifting up state means moving state up from a child to the parent component – meaning that a previously stateless parent component becomes a stateful component, and a previously stateful child component becomes a stateless component.
Correct: That’s right! Lifting up state means moving state up from a child to the parent component – meaning that a previously stateless parent component becomes a stateful component, and a previously stateful child component becomes a stateless component. 

5. A prop doesn’t have to always pass state.

  • True (CORRECT)
  • False

Correct: That’s correct. A prop doesn’t have to always pass state.

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Liking our content? Then don’t forget to ad us to your bookmarks so you can find us easily!

Weekly Breakdown | Meta Study Guides | Back to Top

MODULE QUIZ: DATA AND STATE

1. In React, data flows in one way: from a parent component to a child component.

  • True (CORRECT)
  • False

Correct: That’s correct. The above statement is true. 

2. W​hy is one-way data flow important in React?

  • It ensures that the data is flowing from top to bottom in the component hierarchy. (CORRECT)
  • It ensures that the data is flowing from bottom to top in the component hierarchy.

Correct: Correct. This ensures that the data is flowing from top to bottom in the component hierarchy.

3. True or false? State data is the data inside a component that a component can mutate.

  • True (CORRECT)
  • False

Correct: Correct. State data is data inside a component that a component, which that component controls and can mutate.

4. W​hat is prop drilling?

  • Prop drilling is a situation where you are passing data from a parent to a child component, then to a grandchild component, and so on, until it reaches a more distant component further down the component tree, where this data is required (CORRECT)
  • Prop drilling is a situation where you are passing data from a child, to a parent component, then to a grandparent component, and so on, until it reaches a more distant component further up the component tree, where this data is required.

Correct: Correct. Prop drilling is a situation where you are passing data from a parent to a child component, then to a grandchild component, and so on, until it reaches a more distant component further down the component tree, where this data is required

5. The distinction between stateful and stateless components is that the latter doesn’t have its own state. 

  • True (CORRECT)
  • False

Correct: That’s correct! This statement is true.

6. Choose the correct statement..

  • Remember that you should always change the values of props in children components; you should never work with them as they are. In other words, props are mutable. 
  • Remember that you should never change the values of props in children components; you should only work with them as they are. In other words, props are immutable. (CORRECT)

Correct: That’s correct! Props are immutable and thus you should not attempt to update them in children components.

7. Is this code valid?

function App() {
   const handler = () => console.log('fourth example')
   return ( 
      <div> 
        <button onClick = {handler} >
          Click Me!
        </button>
      </div>
   )
}
export default App
  • Yes (CORRECT)
  • No

Correct: Correct! This code is an example of a valid onClick event handler.  

8. Is this code valid?

<button onClick={ () => console.log('clicked') }> 
  Click me
</button>
  • Yes (CORRECT)
  • No

Correct: Correct! This code is an example of a valid onClick event handler.  

9. Select the correct statement: The useState hook…

  • .​.. lets you hook into React state and lifecycle features from a component. (CORRECT)
  • …i​s not  part of React; you must import it from a third-party package.
  • … has a convention that if the state variable is named, for example, counter, the function to update this counter variable should be named counterFunction. 
  • … should never be called at the top level of a React component. 

10. The Context API allows you to:

  • Avoid having to pass state down through multiple levels of components.​ (CORRECT)
  • Avoid having to use the return statement in a child component.​
  • A​void having to keep your components modular.

Correct: C​orrect. Using Context API allows you to bypass having to pass state down through multiple levels of components.

11. Choose a React event-handling attribute.

  • React.on-click
  • OnClick (CORRECT)
  • click
  • on-click

Correct: That’s right! In React , you can use the onClick event-handling attribute to handle click events.

12. Event handlers make sure that the actions of events are executed. To set up the click handling behavior for a button, you can use an expression named clickHandler.       

  • True
  • False (CORRECT)

Correct: Not quite. In fact, you can use clickHandler to set up how a button responds to a click. This is done by defining the clickHandler, setting it as a function, and assigning an arrow function to it.

13. True or false? You can use the onclick event-handling HTML attribute to handle click events.      

  • True (CORRECT)
  • False

Correct: That’s right! You can use the onclick event-handling HTML attribute to handle click events, as long as you provide it some JS code to handle the triggered click event.      

14. In React, a click handler is placed inside a JSX expression, and only needs a click handler function’s name – without the parentheses to invoke it.      

  • True (CORRECT)
  • False

Correct: That’s right! In React, a click handler is placed inside a JSX expression, and only needs a click handler function’s name – without the parentheses to invoke it. This is what makes it different from HTML event handing attributes.    

15. What are the advantages of utilizing a centralized point of data – a “single source of truth” – in your React apps? Choose all that apply.      

  • Data flows both ways, so it can be edited from anywhere       
  • It allows you to edit multiple items from a single point  (CORRECT)   
  • It offers a more efficient way of working when data frequently changes  (CORRECT)   
  • It reduces the possibility of typing errors in your code (CORRECT)

Correct: That’s right! Using a single source of truth allows you to edit multiple items at the same time if they reference the same data, reduces odds of typing errors, and is more efficient when data changes often.       
Correct: That’s right! Using a single source of truth allows you to edit multiple items at the same time if they reference the same data, reduces odds of typing errors, and is more efficient when data changes often.       
Correct: That’s right! Using a single source of truth allows you to edit multiple items at the same time if they reference the same data, reduces odds of typing errors, and is more efficient when data changes often.       

16. Which of the following statements about data flow in React are correct? Select all that apply.      

  • Data can flow from parent to child and in the other direction with state data.     
  • The props data is data outside the component and can mutate.    
  • The props data is data outside the component and cannot mutate. (CORRECT)   
  • State data is data inside the component, and the component can control and mutate the data. (CORRECT)

Correct: That’s right! State data is a component’s internal data, which it can control and mutate. Props data is outside of the component and is immutable, meaning it cannot change.   
 
Correct: That’s right! State data is a component’s internal data, which it can control and mutate. Props data is outside of the component and is immutable, meaning it cannot change.        

17. Which of these rules apply to hooks in React?  Check all that apply.      

  • Hooks can be called from any JavaScript function.     
  • Hooks can be called only at the top level. (CORRECT)
  • Hooks can be called only from React functions. (CORRECT)

Correct: Correct! Hooks can be called only at the top level and only from React functions.      
Correct: Correct! Hooks can be called only at the top level and only from React functions.

18. A parent component is able to pass its state onto children components. True or false?      

  • False
  • True (CORRECT)

Correct: That’s right! A child component will receive the data via properties, passing state that’s set in a parent stateful component.      

19. Consider the following line of code, which contains a useState hook:  

const [date, setDate] = React.useState(new Date());   

Which argument updates the state?      

  • SetDate (CORRECT)
  • Date

Correct: Well done! While ‘Date’ accesses state, ‘setDate’ is the argument that updates it with the function.      

20. Lifting state up is coding your app so that the state from the child component is moved to the parent component and the child component simply receives it via props.      

  • False
  • True (CORRECT)

Correct: That’s correct. Lifting state up is about cutting the state from the child component and moving it to the parent component’s code, with the intent of making the state available in sibling components.     

21. What’s a context consumer?      

  • Context provider is the context consumer.     
  • The App component is the context consumer.     
  • The index.js file is the context consumer.      
  • It’s the component that uses the context provider’s state. (CORRECT)

Correct: That’s right! Any component that uses the state provided by context API        

22. You are creating a page for your app consisting of two components:   

Parent: displays different information based on whether or not user has logged in.  

Child: contains an event handler that sends data to Parent when ‘Log in’ button is clicked.

In this scenario, would it be better to use a stateful or stateless parent component?     

  • Stateful (CORRECT)
  • Stateless

Correct: That’s right! The parent component needs to maintain either a ‘logged in’ or ‘logged out’ state in order to work as intended, so it should be stateful.      

Data and State CONCLUSION

After completing this module, you should be able to: Understand the basic structure of a React component and use it to create a simple one, Explain what JSX is and how it differs from HTML, Understand how to use props in order to pass data into child components from parent ones, Style React components using CSS.

If you want to learn more about React and build single page web applications, join Coursera now!

Subscribe to our site

Get new content delivered directly to your inbox.

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!