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
Previous

Leave a Reply