advanced react coursera week 3 quiz answers

Knowledge check: JSX

1. Let’s suppose you have the below JSX that gets returned from a component, what would be the equivalent object representation (Element) that React will create internally?

< button className='button-primary'>
< div>
Submit
< /div>
< /button>

  • {
    type: “button”,
    props: {
    className: “button-primary”,
    children: {
    type: “div”,
    children: “Submit”
    },
    },
    }
  • {
    type: Button,
    props: {
    className: “button-primary”,
    children: “div”,
    },
    }
  • {
    type: “button”,
    props: {
    className: “button-primary”,
    children: {
    type: “div”,
    props: {
    children: “Submit”,
    }
    },
    },
    }

2. What is the concept of component specialization?

  • A component defined as a special case of another more generic component.
  • A component that doesn’t know its children ahead of time and acts as a generic box.

  • A component that is designed to fulfill one specific purpose and nothing else.

3. You would like to clone a React element by using the React.cloneElement API, where the particular element has the below structure:

const buttonElement = {
type: SubmitButton,
props: {
color: "green",
children: "Submit!",
},
};

What would be the value of the variable output when using the API with the following parameters?

const output = React.cloneElement(buttonElement, {disabled: true, color: “blue” });

  • {
    type: SubmitButton,
    props: {
    color: “blue”,
    children: “Submit!”,
    disabled: true,
    },
    };
  • {
    type: SubmitButton,
    props: {
    disabled: true,
    color: “blue”,
    },
    };
  • {
    type: SubmitButton,
    props: {
    color: “green”,
    children: “Submit!”,
    disabled: true,
    },
    };

4. Imagine you are using the spread operator in the below component as follows:

const props = { title: "tiramisu", cal: 400 };
const element = < Component title="cake" {...props} cal={500} />;

What would be the value of element.props?

  • { title: “cake”, cal: 500 }
  • { title: “tiramisu”, cal: 400 }
  • { title: “cake”, cal: 400 }
  • { title: “tiramisu”, cal: 500 }

5. Amongst the below expressions, select all that will not render anything on the screen when being used in JSX.

  • <div>{(() => true)()}</div>
  • <div>{null}</div>
  • <div>{undefined}</div>
  • <div>{false}</div>

Knowledge check: Reusing behavior

6. When dealing with cross-cutting data in your React applications, what are some of the problems of using a custom hook to encapsulate that logic? Select all that apply.

  • That it turns a stateless component into a stateful one.
  • There are no problems at all with hooks, being the best suited tool for the job.
  • The fact that you would have to alter the implementation of each component that needs that specific data.

7. Here, you can find the APIs of some higher-order components that have been already implemented. Amongst all the options, which ones present an invalid signature that doesn’t follow the convention? Select all that apply.

  • withSubscription(() => getData())(Component)
  • withSubscription(() => getData(), Component)
  • withSubscription(Component, options)

8. What are some of the best practices to follow when implementing the higher-order component pattern? Select all that apply.

  • Passed unrelated props through to the Wrapped Component.
  • Mutate the original component
  • Maximize composability.
  • Always use HOCs and create your enhanced components inside other components.

9. What are some of the differences between higher-order components and render props? Select all that apply.

  • Render props provide the new data as a function parameter, whereas components wrapped with an HOC get the new data as a new prop.
  • Higher-order components modify the original implementation of the component, whereas the Render Props pattern doesn’t.
  • They inject the new props in the component to be enhanced in a different way.

10. True or false. A component with a render prop as renderer can do anything a higher-order component can do.

  • False
  • True

Knowledge check: Automated testing

11. Why is automated testing important? Select all that apply.

  • It offers a faster feedback cycle, bringing faster validation and helping the development team to detect problems or bugs early.
  • It reduces human error.
  • It saves time to development teams.

12. What are some of the best practices when writing your automated tests? Select all that apply

  • They should resemble the way your software is used.
  • Your tests need to be focused on the implementation details of your components.
  • They should be maintainable in the long run.

13. Imagine you have a component that renders both an input tag and a label tag with the exact text Comments:. Inside your test, you have the below piece of code:

const element = screen.getByLabelText(/Comments:/);

What would be the type of element returned by getByLabelText?

  • The document object
  • The label element
  • The input element

14. In a particular test that’s been written for a form component, you encounter the below two lines of code. What kind of data would the handleSubmit variable represent?

const handleSubmit = jest.fn();
render(< FeedbackForm onSubmit={handleSubmit} />);

  • A mock function to track how is called by external code and thus explore the arguments passed in.
  • A copy of the real function that’s used in the parent component that renders the FeedbackForm.
  • A specific function jest provides to handle form submissions

15. What are some of the benefits of Continuous Integration (CI)? Select all that apply.

  • Deliver working software more often.
  • Find bugs earlier and fix them faster.
  • Improved developer productivity.
  • Faster manual integrations.

Module quiz: JSX and Testing

16. What are some of the features of component containment? Select all that apply.

  • A special case of other components.
  • A component that uses the children prop to pass children elements directly as their content.
  • The fact that some components don’t know their children ahead of time.
  • A component that acts as a generic box.

17. What are the props that all components have by default? Select all that apply.

  • children
  • render
  • type

18. What is a React Element? Select all that apply.

  • A JavaScript object that represents the final HTML output.
  • An intermediary representation that describes a component instance.
  • A React Component that represents a simple DOM node, like a button.

19. Assuming you have the below component, what are all the features implemented from component composition with children?

function ConfirmationDialog() {
return (
< Dialog color="blue">
< h1 className="Dialog-title">
Thanks!
< /h1>
< p className="Dialog-message">
We’ll process your order in less than 24 hours.
< /p>
< /Dialog>
);
}

  • Component containment.
  • Component specialization and component containment.
  • Component specialization.

20. What are some of the use cases that the React.cloneElement API allows you to achieve? Select all that apply.

  • Add to children properties.
  • Extend the functionality of children components.
  • Modify children’s properties.

21. Assuming you have the following Row component that uses React.Children.map to perform some dynamic transformation in each child element, in order to add some custom styles, what’s wrong about its implementation? Select all that apply.

const Row = ({ children, spacing }) => {
const childStyle = {
marginLeft: `${spacing}px`,
};

return(
< div className="Row">
{React.Children.map(children, (child, index) => {
child.props.style = {
...child.props.style,
...(index > 0 ? childStyle : {}),
};

return child;
})}
< /div>
);
};

  • You can’t use the spread operator in the style prop.
  • Each child is missing a key, causing potential problems if the list order changes.
  • Each child is being mutated.

22. 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 onClick={handleClick} {...props} />;
};
};

const MyButton = withClick(Button);

export default function App() {
return console.log("AppClick")}>Submit;
}

  • “ButtonClick”
  • “WithClick”
  • “AppClick”

23. Among the below options, what are valid solutions to encapsulate cross-cutting concerns? Select all that apply

  • Custom hooks.
  • Components that consume context.
  • Render props pattern.
  • Higher order components.

24. What does the screen utility object from react-testing-library represent when performing queries against it?

  • The whole page or root document
  • The whole virtual DOM
  • Your laptop screen

25. When writing tests with Jest and react-testing-library, what matcher would you have to use to assert that a button is disabled?

  • toHaveBeenCalled
  • toBeInTheDocument
  • toHaveAttribute

Leave a Reply