Module quiz: JSX and Testing - Advanced React

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 component that acts as a generic box.

• A special case of other components.

• The fact that some components don’t know their children ahead of time.

What are the props that all components have by default?

• children

• type

• render

What is a React Element? Select all that apply.

• A React Component that represents a simple DOM node, like a button.

• A JavaScript object that represents the final HTML output.

• An intermediary representation that describes a component instance.

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.

• Component specialization and component containment.

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.

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?

 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.

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 <MyButton onClick={() => console.log("AppClick")}>Submit</MyButton>;
 }

• “ButtonClick”

• “WithClick”

• “AppClick”

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

• Components that consume context.

• Render props pattern.

• Custom hooks.

• Higher order components.

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

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

• toBeInTheDocument

• toHaveBeenCalled

• toHaveAttribute