features of component containment

1. a component that uses the children prop to pass children elements directly as their content
2. some components don’t know their children ahead of time
3. a component that acts as a generic box

all components have an implicit children prop by default

what is a react element

1. JS object that represents the final HTML output
2. intermediary representation that describes a component instance generated from JSX

example of component containment + specialization

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

React.cloneElement API use cases

1. modify children’s properties
2. extend functionality of children components
3. add to children properties

Incorrect use of React.Children.map

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

  return(
    <div className="Row">
	    // mutates each child
      {React.Children.map(children, (child, index) => {
        child.props.style = {
          ...child.props.style,
          ...(index > 0 ? childStyle : {}),
        };
        return child;
      })}
      
      // You should use React.cloneElement to create a copy first
	    {React.Children.map(children, (child, index) => {
		    return React.cloneElement(child, {
			    child.props.style = {
	          ...child.props.style,
	          ...(index > 0 ? childStyle : {}),
	        },
		    });
	    })}
	     
    </div>
  );
};

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>;
}

due to the order of the spread operator in the different components, 
the original onClick prop passed to MyButton takes precedence
output: "AppClick"

valid solutions to encapsulate cross-cutting concerns

1. HOC
2. render props
3. custom hooks

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

1. the whole page/root document

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

1. toHaveAttribute