Components INTRODUCTION

SELF-REVIEW: CREATE A BASIC LIST COMPONENT

1. When using the filter operator from arrays in JavaScript, what type should you return from the predicate function to determine if the element should be filtered out or not?

2. When chaining the three array operators required to complete the exercise, map, filter and sort; in which order should they be applied to props.data? Remember that props.data contains an array of dessert objects.

3. When using the map function to transform an array item into a <li> element, what of the following code snippets should be inside the <li> tag to render the list item correctly in the following format: Ice Cream – 200 cal

KNOWLEDGE CHECK: RENDERING LISTS IN REACT

1. Imagine you have an array with one object that represents a dessert. You would like to apply some transformation to the item to output a different structure using the map function as per the code below. What would be the value of the newDesserts variable?

const desserts = [ {
    title: 'Chocolate Cake',
    description: 'Chocolate cake is a cake flavored with melted chocolate',
    calories: 500,
  }
];
 
const newDesserts = desserts.map((dessert) => {
  return {
    title: dessert.title.toUpperCase(),
    ...dessert,
    kCal: dessert.calories / 1000,
  };
});

2. How do you access dynamic data inside the JSX from the render function?

3. What could be a potential problem of using a randomiser function that generates an integer number from 0 to 10 as a key for your list items, having a list of only eight items? Select all that apply

4. The todos array contains a list of todo objects, where each object has an id property that is unique. Which of the following code snippets will throw a React warning when opening up the browser console? Select all that apply

5. What are the potential problems of using indexes as keys?

SELF-REVIEW: CREATE A REGISTRATION FORM

1. When setting a new value for the password state, that is represented by an object with two properties, value and isTouched, what’s the correct call to the setPassword state setter inside the onChange event handler? Select all that apply.

2. What’s the correct event prop you should use to determine when an input has been interacted with at least once? Select all that apply.

3. How do you prevent the default behavior of the form HTML tag in React when a submission event occurs?

KNOWLEDGE CHECK: FORMS IN REACT

1. What of the next input types doesn’t have a controlled version when they are used in React?

2. What are some of the features of controlled components? Select all that apply

3. How do you get the value of an input when its state is handled by the DOM (Uncontrolled)? Select all that apply.

4. What happens when you click on the submit button in the below code snippet?

 <form onSubmit={() => alert("Submitting")}>
   <input type="text" value={text} onChange={e => setText(e.target.value)} />
   <input type="button" value="Submit" />
 </form>

5. What is missing in the below code for the select component to work properly?

<select onChange={handleChange}>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
 </select>

SELF-REVIEW: CREATE A LIGHT-DARK THEME SWITCHER

1. When creating a Provider component, what should you do with the children prop that it receives?

2. Assuming that the default theme for the application is ‘light’, what should be the default value passed to the createContext call? Select all that apply.

3. One of the parts of the context injected into the application is a function called toggleTheme. Assuming that the theme is held in some local state as a string that can be either ‘light’ or ‘dark’. What should be the exact implementation of the toggleTheme function?

KNOWLEDGE CHECK: REACT CONTEXT

1. What of the below scenarios are valid for choosing context instead of local state? Select all that apply.

2. What is the problem of props drilling? Select all that apply.

3. When creating a new piece of application state, what is the bare minimum of React APIs you would need to define it?

4. What happens when the value prop of the Context Provider changes?

5. What happens when you wrap a component with the React.memo API, such as React.memo(Component). Select all that apply.

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

Weekly Breakdown | Meta Study Guides | Back to Top

MODULE QUIZ: COMPONENTS

1. When using a key for your list items, what’s the best general choice?

2. Imagine you have a specification for rendering the following list item:
<li>Ice cream - 200 cal</li>  
where the name and the number of calories are coming as dynamic data. Select all the options that would correctly render the desired output:

3. Let’s suppose you have a list of two items and a new item is added to the list. From the point of view of the React diffing algorithm, what’s the most optimal position for the new element added? Select all that apply

4. What are controlled components?

5. What are the features you can still achieve with uncontrolled components? Select all that apply

6. When creating an API for context consumers via useContext, what’s the argument you have to provide to the useContext call?

7. Imagine the below component structure, where all components ComponentA, ComponentB and ComponentC are simple presentational components that hold no props or state:

const App = () => {
  return(
    <AppContext.Provider>
      <ComponentA />
    </AppContext.Provider>
  );
};
const ComponentA = React.memo(() => <ComponentB />);
const ComponentB = () => <ComponentC />;
const ComponentC = () => null;

8. Even though props and state are inherently different, what are areas where they overlap? Select all that apply.

9. When defining a JavaScript object as a piece of local React state that will be injected as context, what is the specific React hook that allows you to keep the same object reference in memory and prevent unnecessary re-renders if the object itself hasn’t changed any values?

10. What are some possible examples of application features that are well suited to be defined as React context? Select all that apply

11. Which of the following is true about the map() method in JavaScript. Select all that apply.

12. When you are working with lists in JSX, you can return a React component. What is the purpose of curly braces in this process? 

13. Which of the following statements about keys in React are true? Select all that apply.

14. True or false: It is recommended to use item indexes as keys when selecting keys for rendered list items.  

15. You are using controlled components in React in order to have more control over the forms in an application you are creating. Which of the following props is used to perform state delegation?   

16. Imagine you’d like to better control the submission of a form you’re creating for an app. 
Which prop is required to prevent the default behavior of the form submit event in React? 

17. What are the two props you need to add when creating a controlled range component?   

18. Which of the following statements are true about state in React? Select all that apply.

19. Which of the following is true about the Context API? Select all that apply.  

Components CONCLUSION