In this article i am gone to share Coursera Course: Advanced React by Meta Week 3 | Module quiz: JSX and Testing Quiz Answers with you..

Enroll Link: Advanced React

Advanced React Coursera Quiz Answers

Also visit this link:  Module quiz: React Hooks and Custom Hooks Quiz Answers

Module quiz: JSX and Testing Quiz Answers

Question 1)
What are some of the features of component containment? Select all that apply.

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

Question 2)
What are the props that all components have by default? Select all that apply.

• children
• render
• type

Question 3)
What is a React Element? Select all that apply.

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

Question 4)
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.

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

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

Question 6)
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,

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

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

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

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

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

Question 9)
What does the screen utility object from react-testing-library represent when performing queries against it?

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

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

• toHaveBeenCalled
• toHaveAttribute
• toBeInTheDocument