advanced react coursera week 3 quiz answers

Knowledge check: JSX

1. Let’s suppose you have the below JSX that gets returned from a component, what would be the equivalent object representation (Element) that React will create internally?

< button className='button-primary'>
< div>
Submit
< /div>
< /button>

  • {
    type: “button”,
    props: {
    className: “button-primary”,
    children: {
    type: “div”,
    children: “Submit”
    },
    },
    }
  • {
    type: Button,
    props: {
    className: “button-primary”,
    children: “div”,
    },
    }
  • {
    type: “button”,
    props: {
    className: “button-primary”,
    children: {
    type: “div”,
    props: {
    children: “Submit”,
    }
    },
    },
    }

2. What is the concept of component specialization?

  • A component defined as a special case of another more generic component.
  • A component that doesn’t know its children ahead of time and acts as a generic box.

  • A component that is designed to fulfill one specific purpose and nothing else.

3. You would like to clone a React element by using the React.cloneElement API, where the particular element has the below structure:

const buttonElement = {
type: SubmitButton,
props: {
color: "green",
children: "Submit!",
},
};

What would be the value of the variable output when using the API with the following parameters?

const output = React.cloneElement(buttonElement, {disabled: true, color: “blue” });

  • {
    type: SubmitButton,
    props: {
    color: “blue”,
    children: “Submit!”,
    disabled: true,
    },
    };
  • {
    type: SubmitButton,
    props: {
    disabled: true,
    color: “blue”,
    },
    };
  • {
    type: SubmitButton,
    props: {
    color: “green”,
    children: “Submit!”,
    disabled: true,
    },
    };

4. Imagine you are using the spread operator in the below component as follows:

const props = { title: "tiramisu", cal: 400 };
const element = < Component title="cake" {...props} cal={500} />;

What would be the value of element.props?

  • { title: “cake”, cal: 500 }
  • { title: “tiramisu”, cal: 400 }
  • { title: “cake”, cal: 400 }
  • { title: “tiramisu”, cal: 500 }

5. Amongst the below expressions, select all that will not render anything on the screen when being used in JSX.

  • <div>{(() => true)()}</div>
  • <div>{null}</div>
  • <div>{undefined}</div>
  • <div>{false}</div>

Knowledge check: Reusing behavior

6. When dealing with cross-cutting data in your React applications, what are some of the problems of using a custom hook to encapsulate that logic? Select all that apply.

  • That it turns a stateless component into a stateful one.
  • There are no problems at all with hooks, being the best suited tool for the job.
  • The fact that you would have to alter the implementation of each component that needs that specific data.

7. Here, you can find the APIs of some higher-order components that have been already implemented. Amongst all the options, which ones present an invalid signature that doesn’t follow the convention? Select all that apply.

  • withSubscription(() => getData())(Component)
  • withSubscription(() => getData(), Component)
  • withSubscription(Component, options)

8. What are some of the best practices to follow when implementing the higher-order component pattern? Select all that apply.

  • Passed unrelated props through to the Wrapped Component.
  • Mutate the original component
  • Maximize composability.
  • Always use HOCs and create your enhanced components inside other components.

Shuffle Q/A 1

9. What are some of the differences between higher-order components and render props? Select all that apply.

  • Render props provide the new data as a function parameter, whereas components wrapped with an HOC get the new data as a new prop.
  • Higher-order components modify the original implementation of the component, whereas the Render Props pattern doesn’t.
  • They inject the new props in the component to be enhanced in a different way.

10. True or false. A component with a render prop as renderer can do anything a higher-order component can do.

  • False
  • True
Next

Leave a Reply