Advance React Final Project

COURSE 6 – ADVANCED REACT QUIZ ANSWERS

Week 4: Final project

Meta Front-End Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

TABLE OF CONTENT

Final project INTRODUCTION

This Coursera Meta Front-End Developer Professional Certificate program culminates in advance react final project . This project will give you the opportunity to demonstrate all of the skills covered throughout this course and take your front-end development abilities to the next level. You will be assessed on the key skills covered in the coursework, including HTML5, CSS3, JavaScript, jQuery, Node.js, React.js, Redux.js, and more!

After completing the final project successfully, you can proudly add it to your portfolio as evidence of having earned a Coursera Meta Front-End Developer Professional Certificate.

Learning Objectives

  • Synthesize the skills from this course to create a portfolio.
  • Reflect on this course’s content and on the learning path that lies ahead.

FINAL COURSE ASSESSMENT: ADVANCED REACT

1. You are building a form using both Formik and Yup libraries, where one of the inputs is an email. Before the form gets submitted to the server, you would like to set up some client validation with Yup to make sure the field has an email that is valid, otherwise a message “Invalid email address” would be shown on the screen. The submit button will be disabled if no email is provided at all. If the email field is empty, the message “Required” will be shown on the screen. Given those requirements, how would you write the validation rule using the Yup library?

  • Yup.email("Invalid email address").required("Required")
  • Yup.string().email("Invalid email address").required("Required") (CORRECT)
  • Yup.email().string("Invalid email address").required("Required")

Correct: Correct, first Yup needs to know the type of value (string) and then chain the different validation rules with their associated error message to show.

2. You have the following React application where you have a ToDo component that has two text labels and an uncontrolled text input and the entry point App component that renders a list of two ToDos and a button to reverse the order of the ToDos. To avoid a React keys warning, a key is provided to each ToDo component, with the index as its value. Suppose that the next sequence of events happen in the application:
1. You write “Wash the car” in the first ToDo  input
2. You write “Buy bumper stickers” in the second ToDo  input
3. You click the button to reverse the order
What would happen on the screen after that?

const ToDo = props => (
  <tr>
    <td>
      <label>{props.id}</label>
    </td>
    <td>
      <input />
    </td>
    <td>
      <label>{props.createdAt}</label>
    </td>
  </tr>
);
 
function App() {
  const [todos, setTodos] = useState([
    {
      id: 'todo1',
      createdAt: '18:00',
    }, 
    {
      id: 'todo2',
      createdAt: '20:30',
    }
  ]);
 
  const reverseOrder = () => {
    // Reverse is a mutative operation, so we need to create a new array first.
    setTodos([...todos].reverse());
  };
 
  return (
    <div>
      <button onClick={reverseOrder}>Reverse</button>
      {todos.map((todo, index) => (
        <ToDo key={index} id={todo.id} createdAt={todo.createdAt} />
      ))}
    </div>
  );
}
  • todo1 Buy bumper stickers 18:00
  • todo2 Wash the car 20:30 
  • todo2 Buy bumper stickers 20:30
  • todo1 Wash the car 18:00 
  • todo2 Wash the car 20:30
  • todo1 Buy bumper stickers 18:00 (CORRECT)

3. True or false: There are at least two errors in the code below.

import{ createContext, useContext, useState} from"react";
 
const ThemeContext = createContext(undefined);
 
export const ThemeProvider= () => {
  const[theme, setTheme] = useState("light");
 
  return(
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme: () => setTheme(!theme),
      }}
    >
    </ThemeContext.Provider>
  );
};
  • True (CORRECT)
  • False

Correct: Correct, there are two errors in this code. First, the toggleTheme implementation is incorrect and should be: toggleTheme: () =>setTheme(theme === “light” ? “dark” : “light”). Second, ThemeProvider should use the children prop and pass it as a direct child of ThemeContext.Provider.

4. True or False: A tree of elements cannot mix and match both components and DOM elements as the type property.

  • True
  • False. (CORRECT)

Correct: Correct, it is false to claim that they cannot be mixed and matched. Actually, they can.

5. Assuming you have the following set of components, what would be logged into the console when clicking the Submit button that gets rendered on the screen?

const Button = ({ children, ...rest }) => (
  <button onClick={() => console.log("ButtonClick")} {...rest}>
    {children}
  </button>
);
 
const withClick = (Component) => {
  const handleClick = () => {
    console.log("WithClick");
  };
 
  return(props) => {
    return<Component {...props} onClick={handleClick} />;
  };
};
 
const MyButton = withClick(Button);
 
export default function App() {
  return <MyButton onClick={() => console.log("AppClick")}>Submit</MyButton>;
}
  • “ButtonClick”. 
  • “WithClick” (CORRECT)
  • “AppClick” 

Correct: Correct, due to the order of the spread operator in the different components, the withClick higher Order Component (HOC) takes precedence.

6. When writing a test for a React component using jest and react-testing-library, how would you assert that a function has been called with some specific arguments?

  • Using the toHaveBeenCalledWith matcher. (CORRECT)
  • Using the toHaveBeenCalled matcher.
  • Using the toHaveAttribute matcher.

Correct: Correct, this is the proper matcher to check the arguments of the function call.

7. Among the following code examples, what are valid implementations of the render props pattern?

  •  <LoginUser renderUser={<p>Mark</p>} />
  • <MealProvider render={data => (  <p>Ingredients: {data.ingredients}</p>)} /> (CORRECT)
  •  <Row renderIcon={() => <Icon name=”add” />} /> (CORRECT)

Correct: Correct, it uses a render type prop that is a function that returns JSX.

Correct: Correct, it uses a render type prop that is a function that returns JSX. Even though the name is not exactly “render”, explicit variations are also valid.

8. What do you need to add to this code to make the useEffect run only once?

React.useEffect(()=> {
 console.log('The value of the person variable is', person)
})
  • Move the console.log outside of the arrow function 
  • Add an empty dependency array. (CORRECT)
  • Move the console.log outside of the useEffect function 

Correct: Correct! To run the effect once, you need an empty dependency array.

9. True or false? In the following component, the setRestaurantName variable’s value will not be reset between re-renders of the App component.

import {useState} from "react";
 
export default function App() {
  const [restaurantName, setRestaurantName] = useState("Lemon");
 
  function updateRestaurantName() {
    setRestaurantName("Little Lemon");
  };
 
  return (
    <div>
      <h1>{restaurantName}</h1>
      <button onClick={updateRestaurantName}>
        Update restaurant name
      </button>
    </div>
  );
};
  • True (CORRECT)
  • False 

Correct: Correct. The setRestaurantName variable’s value will not be reset between re-renders of the App component.

10. Is the following code snippet valid? Why?

if (data !== '') {
  useEffect(() => {
    setData('test data');
  });
}
  • It’s not valid, because it’s breaking the rules of hooks. (CORRECT)
  • It’s valid, because it’s not breaking the rules of hooks. 
  • It’s valid, because you can use the useEffect() call in an if statement. 

Correct: Correct. If you use a hook in a condition, you’re breaking rules! Thus, the below code is invalid.

11. Select all the statements that are true for React elements:

  • Each element object should have at least two properties: type and children
  • The type of an element can be a DOM node, like a HTML button. (CORRECT)
  • A tree of elements can mix and match both components and DOM elements as the type property. (CORRECT)
  • The type of an element can be a function corresponding to a React component, like a SubmitButton. (CORRECT)

Correct: Correct, the type can be a DOM node.

Correct: Correct, they can be mixed and matched.

Correct: Correct, the type can be a React component.

12. True or False: Using jest and react-testing-library, to assert that a function has been called with some specific arguments, you would need to use the toHaveBeenCalledWith matcher.

  • False.
  • True. (CORRECT)

Correct: Correct, this is the proper matcher to check the arguments of the function call.

13. The below code is not valid, because:

if (data !== '') {
  useEffect(() => {
    setData('test data');
  });
}
  • You’re breaking the rules of hooks. (CORRECT)
  • You’re using the if statement wrong. 
  • You’re using the arrow function wrong. 
  • There’s a typo in the arrow function. 

Correct: Correct. If you use a hook in a condition, you’re breaking rules! Thus, the below code is invalid.

14. Consider the code below, and choose the correct sentence about this code.

import{ createContext, useContext, useState} from"react";
 
const ThemeContext = createContext(undefined);
 
export const ThemeProvider= () => {
  const[theme, setTheme] = useState("light");
 
  return(
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme: () => setTheme(!theme),
      }}
    >
    </ThemeContext.Provider>
  );
};
  • This code has one or more errors in it, and thus needs to be fixed. (CORRECT)
  • This code doesn’t have an error and can be ran as is, without errors. 

Correct: Correct, there are two errors in this code. First, the toggleTheme implementation is incorrect and should be: toggleTheme: () =>setTheme(theme === “light” ? “dark” : “light”). Second, ThemeProvider should use the children prop and pass it as a direct child of ThemeContext.Provider.

15. True or false: When the user clicks the Submit button, the “WithClick” string will never be output to the console.

const Button = ({ children, ...rest }) => (
  <button onClick={() => console.log("ButtonClick")} {...rest}>
    {children}
  </button>
);
 
const withClick = (Component) => {
  const handleClick = () => {
    console.log("WithClick");
  };
 
  return(props) => {
    return<Component {...props} onClick={handleClick} />;
  };
};
 
const MyButton = withClick(Button);
 
export default function App() {
  return <MyButton onClick={() => console.log("AppClick")}>Submit</MyButton>;
}
  • True 
  • False (CORRECT)

Correct: Correct. It is false to claim that the WithClick string will never be output to the console. Actually, due to the order of the spread operator in the different components, the withClick Higher-order component (HOC) takes precedence, and is the thing to be console logged.

16. Is the following piece of code a valid implementation of the render props pattern?

<MealProvider render={data => (
  <p>Ingredients: {data.ingredients}</p>
)}/>
  • Yes (CORRECT)
  • No

Correct: Correct, it uses a render type prop that is a function that returns JSX.

17. You need the below code snippet to run only after the initial render. What updates (if any) do you need to make to the code?

React.useEffect(()=> {
 console.log('The value of the toggle variable is', toggle)
})
  • Add an empty dependency array. (CORRECT)
  • You shouldn’t make any updates. 
  • You should remove the toggle variable .

Correct: Correct! To run the effect only on the initial render, you need an empty dependency array.

18. You have the following React application where you have a ToDo component that has two text labels and an uncontrolled text input and the entry point App component that renders a list of two ToDos and a button to reverse the order of the ToDos. To avoid a React keys warning, a key is provided to each ToDo component, with the index as its value. Suppose that the next sequence of events happen in the application:
1. You write “Wash dishes” in the first ToDo  input
2. You write “Buy groceries” in the second ToDo  input
3. You click the button to reverse the order
What would happen on the screen after that?

const ToDo = props => (
  <tr>
    <td>
      <label>{props.id}</label>
    </td>
    <td>
      <input />
    </td>
    <td>
      <label>{props.createdAt}</label>
    </td>
  </tr>
);
 
function App() {
  const [todos, setTodos] = useState([
    {
      id: 'todo1',
      createdAt: '18:00',
    }, 
    {
      id: 'todo2',
      createdAt: '20:30',
    }
  ]);
 
  const reverseOrder = () => {
    // Reverse is a mutative operation, so we need to create a new array first.
    setTodos([...todos].reverse());
  };
 
  return (
    <div>
      <button onClick={reverseOrder}>Reverse</button>
      {todos.map((todo, index) => (
        <ToDo key={index} id={todo.id} createdAt={todo.createdAt} />
      ))}
    </div>
  );
}
  • todo2 Wash dishes 20:30
  • todo1 Buy groceries 18:00 (CORRECT)
  • todo1 Buy groceries 18:00
  • todo2 Wash dishes 20:30 
  • todo2 Buy groceries 20:30
  • todo1 Wash dishes 18:00 

19. True or false: The following piece of code is an example of the render props pattern.

<LoginUser renderUser={<p>Mark</p>} />
  • True 
  • False (CORRECT)

20. You are given the below piece of code.

import {useState} from "react";
 
export default function App() {
  const [restaurantName, setRestaurantName] = useState("Lemon");
 
  function updateRestaurantName() {
    setRestaurantName("Little Lemon");
  };
 
  return (
    <div>
      <h1>{restaurantName}</h1>
      <button onClick={updateRestaurantName}>
        Update restaurant name
      </button>
    </div>
  );
};

True or false: The restaurantName variable’s value will always be reset between re-renders of the App component.

  • True 
  • False (CORRECT)

Correct: Correct. The restaurantName variable’s value will not be reset between re-renders of the App component.

21. Is this valid code?

if (data !== '') {
  useEffect(() => {
    setData('test data');
  });
}
  • No (CORRECT) 
  • Yes 

Correct: Correct. If you use a hook in a condition, you’re breaking rules! Thus, the below code is invalid.

22. True or False: The type of a React element can be a DOM node, such as, for example, an HTML button.

  • False.
  • True (CORRECT)

Correct: Correct, the type can be a DOM node.

Final project CONCLUSION

Now that you have completed this course, you should be able to demonstrate a number of key skills related to web development. You will also have the opportunity to add a new project to your portfolio, which will showcase your abilities to prospective employers or clients. If you enjoyed this course and would like to continue learning about web development, we encourage you to join Coursera today.

With Coursera, you can access hundreds of courses from some of the best universities in the world. Thank you for studying with us and we hope to see you again soon!

Previous Week
Next Course

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

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

Subscribe