# Module quiz: JSX and Testing - Advanced React

1. **What are some of the features of component containment? Select all that apply.**
    
    * <mark>A component that uses the children prop to pass children elements directly as their content.</mark>
        
    * <mark>A component that acts as a generic box.</mark>
        
    * A special case of other components.
        
    * <mark>The fact that some components don’t know their children ahead of time.</mark>
        
2. **What are the props that all components have by default?**
    
    * <mark>children</mark>
        
    * type
        
    * render
        
3. **What is a React Element? Select all that apply.**
    
    * A React Component that represents a simple DOM node, like a button.
        
    * <mark>A JavaScript object that represents the final HTML output.</mark>
        
    * <mark>An intermediary representation that describes a component instance</mark>.
        
4. Assuming you have the below component, what are all the features implemented from component composition with children?
    
    ```javascript
    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.
        
    * <mark>Component specialization and component containment.</mark>
        
5. **What are some of the use cases that the** `React.cloneElement` **API allows you to achieve? Select all that apply.**
    
    * <mark>Add to children properties.</mark>
        
    * <mark>Extend the functionality of children components.</mark>
        
    * <mark>Modify children's properties.</mark>
        
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?**
    
    ```javascript
    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.
        
    * <mark>Each child is being mutated.</mark>
        
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?**
    
    ```javascript
    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”
        
    * <mark>“AppClick”</mark>
        
8. **Among the below options, what are valid solutions to encapsulate cross-cutting concerns? Select all that apply**
    
    * Components that consume context.
        
    * <mark>Render props pattern.</mark>
        
    * <mark>Custom hooks.</mark>
        
    * <mark>Higher order components.</mark>
        
9. **What does the screen utility object from react-testing-library represent when performing queries against it?**
    
    * <mark>The whole page or root document</mark>
        
    * The whole virtual DOM
        
    * Your laptop screen
        
10. **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
        
    * <mark>toHaveAttribute</mark>
        

---

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726477113339/5ff893b7-660b-4ca0-b920-7284c772563f.png align="center")