Data and State INTRODUCTION

KNOWLEDGE CHECK: EVENTS AND ERRORS

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

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

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.

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

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

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.

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

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

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

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>
  );
}

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() {
}

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

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

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>
  );
}

KNOWLEDGE CHECK: DATA FLOW

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

2. Uni-directional data flow is…

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

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

5. The props parameter is:

6. Consider the following piece of code:

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

Which element of this code represents a child component?

KNOWLEDGE CHECK: STATE THE CONCEPT

1. In React, can state be considered data?

2. In React, can props be considered data?

3. Choose the correct statement.

4. What does the useState hook do?

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>
  );
}

KNOWLEDGE CHECK: PASSING STATE

1. What is the Context API?

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

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…

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

5. What is a negative result of lifting up state in 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.

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.

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;

KNOWLEDGE CHECK: STATE OR STATELESS

1. What is a stateless component?

2. A stateful component must have a props object.

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

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

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

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

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.

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

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

4. W​hat is prop drilling?

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

6. Choose the correct statement..

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

8. Is this code valid?

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

9. Select the correct statement: The useState hook…

10. The Context API allows you to:

11. Choose a React event-handling attribute.

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.       

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

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.      

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.      

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

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

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

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

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

Which argument updates the state?      

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.      

21. What’s a context consumer?      

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?     

Data and State CONCLUSION